How to set the width of the text box when using Html.TextBoxFor

Question

I have the following line in my view:

     <%= Html.TextBoxFor(m => m.Description)%>                    
         


        

Answer 1

A reusable solution is to set the width in your css file

.wide
{
     width: 300px;
}

then set it using the markup above

<%= Html.TextBoxFor(m => m.Description, new { @class= "wide" })%> 

Answer 2

This worked for me for the one-offs, pretty verbose though:

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

Answer 3

To me it worked by adding the "input" in the CSS for @Html.TextBoxFor:

CSS:

.campoTexto input {
    width: 50px;
}

For:

<div class="campoTexto">
@Html.TextBoxFor(model => model.nombre)
</div>

Answer 4

You can do also like this

  @Html.TextBoxFor(model => model.Email, new Dictionary<string, object>() { { "readonly", "true" }, { "style", "width:250px;" } })

Answer 5

Just use the properties like "TextBoxFor,TextArea" etc instead of "EditorFor"... Lot of people when use scaffolding, they have to change the fields by themselves or data annotations for in model like [DataType(Multiline)]

Answer 6

You can attach it as an attribute. Try this:

<div class="editor-field">
     <%= Html.TextBoxFor(m => m.Description, new { style = "width:20em;" })%>                     
</div>