C# MVC和宽度编辑器

我可以为视图上的控件设置编辑器的宽度吗

我设置了几个参数：

[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>

m、 名称）%%>
m、 名称）%%>

这能做到吗

我试过：

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

m.名称，新{width=50）%>

---

但是没有乐趣…

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

使用TextBoxFor而不是EditorFor：

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

m.Name，新的{style=“width:50px”}）%>

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

如果您需要超出常规css规则的自定义宽度，并且您使用的是编辑器模板，您可以这样做

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

---

在MVC5中，site.css中有一个设置，将所有文本区域的最大宽度设置为200。这让我很困惑，直到我找到这篇博客文章。 正如保罗·利特温所说：

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

因此，如果您是一个实用主义者，您可以使用BootStrap 3将最大宽度更改为eg 600px

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

---

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

文本区，
输入[type='text']，
.组成小组，
.表格组lg，
.从水平方向，
.表格管制，
.文本框，
.单线，
.多线{
宽度：800px！重要；
最大宽度：1000px！重要；
}
.多线{
高度：300px！重要；
}
.形成水平{
位置：绝对位置；
左：15%；
}

请参阅附加的图像结果

替换

m.名称，新的{width=50）%>

用于此

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

m.Name，新的{htmlAttributes=new{style=“width:50px”}，}

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

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

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

---

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

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

您可以在此处设置任何默认值，或删除块以获得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%;
}

---

在Site.CSS的CSS文件中，如果您在首次创建MVC项目时使用VS自动生成所有内容，则默认最大宽度为280px。无论您使用给定id设置

@html.editorfor

的宽度有多大，它都受到以下语法的限制

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

您可以在此处更改它，方法是为其指定新的最大宽度或最大高度。

对于ASP.NET Core：

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

m.Name，新的{htmlAttributes=new{style=“width:50px”}}）%>

听起来不错-但是，怎么做呢？我想把它作为CSS，为我的控件设置一个通用设置。@cdotlister-试试这个：

m.Name，new{@class=“myCss”}）%%>

然后在你的.CSS文件中有

input.myCss{width:50em；}

我这样做了，但控件呈现如下：@cdotlister-哦，抱歉，没有足够的关注。EditorFor使用模板创建类，因此除非您创建自己的编辑器模板，否则您无法控制属性。请使用TextBoxFor和LabelFor自行执行，这将接受新参数。其他e、 你必须创建一个自定义编辑器模板。我搜索了MVC的“文本框280像素限制”和类似内容，直到找到了这条隐藏的评论，才找到了很多。在这里找到它真是令人沮丧：（感谢正确的方向，提高这个最大限制让我能够真正设计我的网站：）我不认为textarea类可以反映一个输入元素，但是是的。确实如此！这不是一个完整的证明解决方案。如果我们希望控件是日历控件，该怎么办？TextBoxFor不会呈现动态字段。

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

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