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

Question

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?

Cheddar · Accepted Answer · 2010-03-25 17:12:00Z

up vote 27 down vote accepted

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

answered Mar 25 '10 at 17:12

Cheddar
1,19768

Josh · Answer 2 · 2010-07-18 06:55:02Z

up vote 23 down vote

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

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

answered Jul 18 '10 at 6:55

Josh
45645

Chris Van Opstal · Answer 3 · 2010-03-25 16:36:09Z

up vote 4 down vote

You can attach it as an attribute. Try this:

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

answered Mar 25 '10 at 16:36

Chris Van Opstal
14.3k32962

	what is em in `20em` stand for? – VoodooChild Nov 16 '10 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? – VoodooChild Nov 16 '10 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 '10 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) – Michael Shimmins Nov 22 '10 at 6:14
	I still don't get the difference, please elaborate! – VoodooChild Nov 22 '10 at 16:04

Clark Kent · Answer 4 · 2012-05-09 23:14:31Z

up vote 1 down vote

You can do also like this

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

answered May 9 '12 at 23:14

Clark Kent
3,3382769

Cesar AD · Answer 5 · 2013-06-03 04:06:03Z

up vote 0 down vote

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>

answered Jun 3 at 4:06

Cesar AD
213

5 Answers