CODEWITHSUNDEEP
c#.netasp.net-mvc
AwkwardCoder
AwkwardCoder

Reputation: 25631

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

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?

Upvotes: 39

Views: 105711

Answers (6)

Suhail Mumtaz Awan
Suhail Mumtaz Awan

Reputation: 3483

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

Upvotes: 2

Chris Van Opstal
Chris Van Opstal

Reputation: 37537

You can attach it as an attribute. Try this:

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

Upvotes: 16

Cesar Alvarado Diaz
Cesar Alvarado Diaz

Reputation: 759

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>

Upvotes: 2

NoWar
NoWar

Reputation: 37633

You can do also like this 

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

Upvotes: 3

Josh
Josh

Reputation: 2492

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

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

Upvotes: 66

Cheddar
Cheddar

Reputation: 4758

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

Upvotes: 46

Related Questions