25

我可以在我的视图上设置 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)%>

但没有快乐...

4

12 回答 12

35

使用 TextBoxFor 代替 EditorFor：

<%=Html.TextBoxFor(m => m.Name, new {style = "width:50px"})%>
于 2011-07-05T14:58:53.137 回答
18

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

于 2011-01-18T06:22:46.940 回答
10

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

是的，Microsoft 出于某种原因将所有输入、选择和文本区域控件的最大宽度设置为 280 像素。不确定这背后的动机，但除非你改变它或通过将表单控件分配给其他 CSS 类来覆盖它，否则你的控件将永远不能超过 280px。

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

所以如果你是一个务实的人，你可以将最大宽度更改为例如 600px

于 2015-06-24T20:49:33.963 回答
7

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

<%=Html.EditorFor(m => m.Name,new { htmlAttributes = new { style = "width: 50px" }, }
于 2016-10-02T18:00:20.443 回答
6

使用 BootStrap 3

@Html.EditorFor(model => model.PriceIndicatorDesc, new { htmlAttributes = new { @class = "form-control", @style = "width:280px" } })
于 2016-03-17T15:30:03.283 回答
3

如前所述，你想去的地方在site.css

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

您可以在此处设置所需的任何默认值或删除块以获得 100% 的 Bootstrap 默认值。就个人而言，我添加了以下选项，以便我可以轻松地根据相关控件和字段进行一些更改：

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

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

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

.form-control-100 {
    max-width: 100%;
}
于 2017-03-03T18:19:34.367 回答
2

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

于 2011-10-11T10:57:19.667 回答
0

如果您需要常规 CSS 规则之外的自定义宽度并且您正在使用编辑器模板，您可以这样做

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

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

@Html.TextBox(s => {
...
    if (ViewBag.Width != null )
    {
       s.Width = ViewBag.Width;
    }
 }).Bind(Model).GetHtml()
于 2013-04-24T22:27:59.667 回答
0

Patrik Lindström 的最大宽度是正确的。

我可以通过设置最大宽度和宽度来解决这个问题

@Html.EditorFor(model => model.Source, new { htmlAttributes = new { @class = "form-control", @placeholder = "Source",  @style = "width: 900px;max-width: 900px;" } })
于 2017-02-27T14:47:15.987 回答
0

在 Site.css 的 CSS 文件中，如果您在首次创建 MVC 项目时让 VS 自动为您生成所有内容，则默认最大宽度为 280 像素。无论您@html.editorfor使用给定的 id 设置多大的宽度，它都受到以下语法的限制。

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

您可以通过给它一个新的最大宽度或最大高度来更改它。

于 2018-10-09T13:01:12.133 回答
0

对于 ASP.NET 核心：

<%=Html.TextBoxFor(m => m.Name, new { htmlAttributes = new { style = "width: 50px" } })%>
于 2019-02-02T19:21:37.737 回答
-1

以上回答是和否。我们需要使用开发工具检查使用的样式并修改它们，它们可能有max-width，width；然后创建自己的 !important 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>

见附件图像结果。

在此处输入图像描述

于 2016-09-07T17:50:38.530 回答