asp.net-mvc How to change width Html.TextBox

Question

how do you change the width of a textbox in an asp.net-mvc View

i want to have these fields side by side and the state textbox much shorter width

            <p>
                <label for="city">City:</label>
                <%= Html.TextBox("city")%>
                <label for="state">State:</label>
                <%= Html.TextBox("state")%>
            </p>

EDIT:

none of the below answers seem to work for me. I noticed that in site.css i see this:

fieldset p 
{
    margin: 2px 12px 10px 10px;
}

fieldset label 
{
    display: block;
}

fieldset label.inline 
{
    display: inline;
}

legend 
{
    font-size: 1.1em;
    font-weight: 600;
    padding: 2px 4px 8px 4px;
}

input[type="text"] 
{
    width: 200px;
    border: 1px solid #CCC;
}

input[type="password"] 
{
    width: 200px;
    border: 1px solid #CCC;
}

how do i override this behavior for one field (textbox)

inline styles will allow you to override the style from the css class. When you are trying to specify a one-off style for a particular html element, inline styles are perfect. The trick is to remember to propagate them back to the css class if they become common throughout your html and are no longer "one-off". For instance, if all of your textboxes need to be 300px wide, then just go change the css class. — Jeff Widmer
– Jeff Widmer, Commented Jun 30, 2009 at 14:23

tvanfosson · Accepted Answer · 2009-06-30 13:38:42Z

32

I would use the helper signature that takes HTML attributes and assign it a CSS class. You would then use CSS to achieve the desired look and feel.

 <%= Html.TextBox( "state", null, new { @class = "small-input" } ) %>

answered Jun 30, 2009 at 13:38

tvanfosson

534k102 gold badges703 silver badges801 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Matthew Groves Over a year ago

Note that "@class" needs the @ (literal) symbol, because class is a reserved word.

tvanfosson Over a year ago

@mgroves, absolutely correct. Thanks for clarifying. Also, note that I'm using null for the default value. This will keep the same behavior for the default value (comes from Model or ViewData) that the version without the extra parameters has.

leora Over a year ago

this doesn't seem to do anything. is that because i have <p> around it

leora Over a year ago

please see updated question. it looks like some other css is overriding the answer above. how can i override this css ?

tvanfosson Over a year ago

Add something like input[type=text] .small-input { width: 50px; } after the input[type=text] line in site.css.

|

Jeff Widmer · Accepted Answer · 2009-06-30 13:43:11Z

22

<%= Html.TextBox("state", null, new { @style = "width: 300px;" })%>

answered Jun 30, 2009 at 13:43

Jeff Widmer

4,8966 gold badges41 silver badges53 bronze badges

2 Comments

Jeff Widmer Over a year ago

But if you are trying to just set the width quickly, as a one-off setting, this will work. I also think there are plenty of places where using inline styles is perfectly acceptable. But I also understand your objection to inline styles.

leora Over a year ago

the inline solution seems to be the only thing that trumps this external css

Peter · Accepted Answer · 2009-07-03 12:36:28Z

1

css

.yourcssclassname{width:50px;}

html

<%= Html.TextBox("city", null, new{@class="yourcssclassname"})%>

that should do it... you could also obviously send along a style attribute, but css classes are a better path to choose.

string.Empty represents the default value.

Edit: see tvanfosson's post

fixed answer so it solves the problems mentioned in the comments.

edited Jul 3, 2009 at 12:36

answered Jun 30, 2009 at 13:42

Peter

14.6k15 gold badges73 silver badges112 bronze badges

3 Comments

tvanfosson Over a year ago

If you use null instead of string.Empty it will pull the default value from the Model or ViewData if available.

leora Over a year ago

shouldn't it be: <%= Html.TextBox("city", string.Empty, new{@class="yourclassname"})%> instead of: <%= Html.TextBox("city", string.Empty, new{@class="yourcssclassname"})%>

Peter Over a year ago

thanks for the tip tvanfosson I didn't know that! You're right about the typo in the css classname "me" :-)

Matthew Groves · Accepted Answer · 2009-06-30 13:42:48Z

0

You can use the TextBox helper to add any arbitrary attibutes to your textbox. For instance:


<%= Html.TextBox( "state", null, new { size = "10" } ) %>

Will render something like:


<input type="text" name="state" size="10" />

answered Jun 30, 2009 at 13:42

Matthew Groves

26.2k11 gold badges76 silver badges126 bronze badges

2 Comments

royco Over a year ago

This doesn't work for me. Does it work for anyone else? IE seems to ignore the setting.

Matthew Groves Over a year ago

Well, it's rendered server-side, so it shouldn't matter what browser you're using.

bcleary · Accepted Answer · 2011-09-27 19:08:26Z

0

If using the default MVC template that ships with VS. Explictly specifying a class in the html attributes of the textbox doesn't seem to override Site.css, however, an inline style does work. So:

{@style= "width: 400px;"}

will work, whereas this wont:

{@class="myclass"}

answered Sep 27, 2011 at 19:08

bcleary

1,4081 gold badge11 silver badges17 bronze badges

Collectives™ on Stack Overflow

asp.net-mvc How to change width Html.TextBox

5 Answers 5

6 Comments

2 Comments

3 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

6 Comments

2 Comments

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related