MVC and EditorFor width

Question

Can I set the width of an EditorFor control on my View?

I have set a few parameters:

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

However, I can't seem to set the width of the textbox that gets rendered.

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

Can this be done somehow?

I tried:

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

But no joy...

Answer 1

Above answer Yes and No. We need to use develop tool to check what styles used and modify them, they may have max-width, width; Then create own !important css to apply it, my case:

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

see attached image result.

enter image description here

Answer 2

If you need a custom width outside of a normal CSS rule and you are using Editor Templates you can do

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

Then in your editor template for String add this to your template

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

Answer 3

In mvc 5 there is setting in site.css that sets the max-width=200 for all textareas. That confused me until i found this blogpost. http://weblogs.asp.net/paullitwin/visual-studio-2013-asp-net-mvc-5-scaffolded-controls-and-bootstrap as Paul Litwin puts it:

Yes, Microsoft is for some reason setting the maximum width of all input, select, and textarea controls to 280 pixels. Not sure the motivation behind this, but until you change this or overrride this by assigning the form controls to some other CSS class, your controls will never be able to be wider than 280px.

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

So you if you are a pragmatic you change the max-width to eg 600px

Answer 4

For ASP.NET Core:

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

Answer 5

With BootStrap 3

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

Answer 6

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

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