36

I have the following line in my view:

<div class="editor-field">
     <%= Html.TextBoxFor(m => m.Description)%>                    
</div>

How do I define the width of the text box?

6 Answers 6

63

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

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

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" })%> 
16

You can attach it as an attribute. Try this:

<div class="editor-field">
     <%= Html.TextBoxFor(m => m.Description, new { style = "width:20em;" })%>                     
</div>
6
  • 1
    what is em in 20em stand for? Nov 16, 2010 at 9:16
  • Also I notice another difference between your answer and Josh's answer above. YOu said <%= and Josh has <%: - are these the same? Nov 16, 2010 at 9:18
  • No VoodooChild, <%= is equivalent to Response.Write(foo) and <%: is the equivalent to Response.Write(Html.Encode(foo)) that's the difference
    – dacanetdev
    Nov 22, 2010 at 6:12
  • @VoodooChild: "Originally the unit was derived from the width of the capital "M" in the currently used typeface." en.wikipedia.org/wiki/Em_(typography) Nov 22, 2010 at 6:14
  • I still don't get the difference, please elaborate! Nov 22, 2010 at 16:04
3

You can do also like this

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

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

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

1
  • 1
    Worked for me. The attribute is actually [DataType(DataType.MultilineText)] Jun 15, 2016 at 14:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.