MVC和EditorFor宽度

问题描述 投票:23回答:12

我可以设置我的视图中的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
12个回答
34
投票

相反EditorFor的,使用TextBoxFor:

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

0
投票

在对的site.css你的CSS文件,默认最大宽度为280像素,如果你有VS自动生成你的一切,当你第一次创建MVC项目。不管你多么大的宽度的设置与给定的ID您@html.editorfor,它是由下面的语法限制。

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

你可以给它一个新的最大宽度或最大高度在此处进行更改。


0
投票

对于ASP.NET核心:

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

-1
投票

以上回答Yes和No.我们需要使用开发工具来检查使用了什么方式和修改它们,它们可能具有最大宽度,宽度;然后创建应用它自己重要的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


18
投票

这有什么错用CSS风格你控制宽度是多少?


10
投票

在MVC 5存在的site.css用于设置最大宽度= 200的所有文字区域设置。这让我感到困惑,直到我发现我这篇文章。 http://weblogs.asp.net/paullitwin/visual-studio-2013-asp-net-mvc-5-scaffolded-controls-and-bootstrap保罗利温所说的那样:

是的,微软是由于某些原因的所有输入,选择和textarea的控制的最大宽度设定为280个像素。不知道这背后的动机,但直到你改变这个或通过分配形式控制一些其他的CSS类overrride这一点,你的控制将永远无法超过280像素宽。

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

所以,你如果你是一个务实的,你改变最大宽度到例如600px的


5
投票

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

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

3
投票

自举3

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

2
投票

您可能需要添加“!重要”的CSS属性,以确保它会覆盖TextBoxFor例如默认!宽度:50px的重要;


2
投票

正如前面提到的,你想要去的地方是的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%;
}

0
投票

如果你需要一个自定义的宽度正常的CSS规则之外,你正在使用的模板编辑器,你可以做

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

然后在字符串编辑器模板添加到您的模板

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

0
投票

帕特里克Lindström的是与最大宽度正确的。

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

@Html.EditorFor(model => model.Source, new { htmlAttributes = new { @class = "form-control", @placeholder = "Source",  @style = "width: 900px;max-width: 900px;" } })
© www.soinside.com 2019 - 2024. All rights reserved.