MVC 和 EditorFor 宽度答案

【问题标题】：MVC and EditorFor widthMVC 和 EditorFor 宽度
【发布时间】：2011-06-10 21:24:04
【问题描述】：

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

但没有快乐……

【问题讨论】：

标签： c# asp.net-mvc-2 editorfor

【解决方案1】：

使用 TextBoxFor 代替 EditorFor：

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

【讨论】：

这不是一个完整的证明解决方案。如果我们希望控件成为日历控件怎么办？ TextBoxFor 不会渲染动态字段。

【解决方案2】：

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

【讨论】：

听起来不错 - 但是，怎么样？我想把它作为一个 CSS，为我的控件设置一个通用设置。
@cdotlister - 试试这个：<%= Html.EditorFor(m => m.Name, new { @class = "myCss" })%> 然后在你的 .css 文件中有 input.myCss {width: 50em;}
我这样做了，但控件呈现如下：
@cdotlister - 哦，抱歉，没有给予足够的关注。 EditorFor 使用模板来创建类，因此您无法控制属性，除非您创建自己的编辑器模板。使用 TextBoxFor 和 LabelFor 自己做，这将接受新参数。否则，您将不得不创建自定义编辑器模板。

【解决方案3】：

在 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 所说：

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

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

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

【讨论】：

我在 MVC 中搜索了“文本框上的 280 像素限制”和类似的东西，但在找到这个隐藏的评论之前找不到太多东西。在这里找到它真是令人难以置信的令人沮丧:(感谢正确的方向，提高这个最大限制让我能够真正设计我的网站:)
我不认为 textarea 类可以反映输入元素，但是是的。做到了！

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

使用 BootStrap 3

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

【讨论】：

【解决方案6】：

如前所述，你想去的地方在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%;
}

【讨论】：

【解决方案7】：

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

【讨论】：

【解决方案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()

【讨论】：

【解决方案9】：

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

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

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

【讨论】：

【解决方案10】：

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

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

你可以在这里通过给它一个新的 max-width 或 max-height 来改变它。

【讨论】：

【解决方案11】：

对于 ASP.NET Core：

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

【讨论】：

【解决方案12】：

上面回答是和否。我们需要使用开发工具检查使用的样式并修改它们，它们可能有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>

查看附件图片结果。

enter image description here

【讨论】：