Question

我可以在View上设置EditorFor控件的宽度吗？

我设置了一些参数：

[Required, DisplayName("Payee Name"), StringLength(50)]
public string Name { get; set; }

但是，我似乎无法设置渲染文本框的宽度。

<table width="300" border="0" cellpadding="3" cellspacing="0">
    <tr>
        <td>
            <%=Html.LabelFor(m => m.Name)%>
        </td>
        <td>
            <%=Html.EditorFor(m => m.Name)%>
        </td>
    </tr>

这可以以某种方式完成吗？

我试过了：

<%=Html.EditorFor(m => m.Name, new {width=50)%>

但没有快乐......

Answer 1

使用TextBoxFor：

而不是EditorFor

<%=Html.TextBoxFor(m => m.Name, new {style = "width:50px"})%>

Answer 2

使用CSS设置控件宽度的样式有什么问题？

Answer 3

在mvc 5中，site.css中有一个设置，它为所有textareas设置max-width = 200。这困惑了我，直到我找到这篇博文。 http://weblogs.asp.net/paullitwin/visual-studio-2013-asp-net-mvc-5-scaffolded-controls-and-bootstrap 正如Paul Litwin所说：

是的，Microsoft出于某种原因设置了所有的最大宽度 input，select和textarea控件为280像素。不确定这背后的动机，但直到你改变这个或改写它将表单控件分配给其他CSS类，即控件将永远不会超过280px。

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

所以，如果你是务实的，你可以将max-width更改为例如600px

Answer 4

替换此{/ p>的<%=Html.EditorFor(m => m.Name, new {width=50)%>

<%=Html.EditorFor(m => m.Name,new { htmlAttributes = new { style = "width: 50px" }, }

Answer 5

使用BootStrap 3

@Html.EditorFor(model => model.PriceIndicatorDesc, new { htmlAttributes = new { @class = "form-control", @style = "width:280px" } })

Answer 6

您可能需要在css属性中添加“！important”以确保它覆盖TextBoxFor的默认值，例如：宽度：50px！important;

Answer 7

如前所述，您要去的地方是site.css

input,
select,
textarea {
    max-width: 280px;
}

您可以设置所需的任何默认值，也可以删除该块以使Bootstrap默认值为100％。就个人而言，我添加了以下选项，因此我可以根据相关控件和字段轻松进行一些更改：

.form-control-25 {
    max-width: 25%;
}

.form-control-50 {
    max-width: 50%;
}

.form-control-75 {
    max-width: 75%;
}

.form-control-100 {
    max-width: 100%;
}

Answer 8

如果您需要在普通CSS规则之外的自定义宽度，并且您正在使用编辑器模板，则可以执行

<%=Html.EditorFor(m => m.Name, new { Width = 50})%>

然后在您的编辑器模板中将String添加到模板

@Html.TextBox(s => {
...
    if (ViewBag.Width != null )
    {
       s.Width = ViewBag.Width;
    }
 }).Bind(Model).GetHtml()

Answer 9

PatrikLindström的最大宽度是正确的。

我可以通过设置最大宽度和宽度

来解决这个问题

@Html.EditorFor(model => model.Source, new { htmlAttributes = new { @class = "form-control", @placeholder = "Source",  @style = "width: 900px;max-width: 900px;" } })

Answer 10

在Site.css的CSS文件中，如果第一次创建MVC项目时VS自动为您生成所有内容，则默认的最大宽度为280px。不管您用给定的ID设置@html.editorfor的宽度有多大，它都受以下语法的限制。

input,
select,
textarea{
     max-width:280px
}

您可以在此处通过为其指定新的最大宽度或最大高度来更改它。

Answer 11

对于ASP.NET Core：

<%=Html.TextBoxFor(m => m.Name, new { htmlAttributes = new { style = "width: 50px" } })%>

Answer 12

以上回答是和否我们需要使用开发工具来检查使用的样式并修改它们，它们可能有最大宽度，宽度;然后创建自己的！重要的CSS来应用它，我的情况：

<style>
    textarea,
    input[type='text'],
    .form-group,
    .form-group-lg,
    .form-horizontal,
    .form-control,     
    .text-box,
    .single-line,
    .multi-line{
        width: 800px !important;
        max-width: 1000px !important;
    }
    .multi-line{
        height: 300px !important;
    }
    .form-horizontal{
        position:absolute;
        padding-left:15%;
    }
</style>

参见附图图片。

enter image description here

MVC和EditorFor宽度

12 个答案: