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

asp.net-mvc textbox

63,227

Solution 1

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

Solution 2

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

Solution 3

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.

63,227

Author by

leora

Updated on August 22, 2022

Comments

leora over 1 year

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)

Matthew Groves almost 15 years

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

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

@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.
Jeff Widmer almost 15 years

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 almost 15 years

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

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

the inline solution seems to be the only thing that trumps this external css
tvanfosson almost 15 years

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

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

This doesn't work for me. Does it work for anyone else? IE seems to ignore the setting.
Matthew Groves over 14 years

Well, it's rendered server-side, so it shouldn't matter what browser you're using.
Shaiju T over 8 years

also check this to make text box smaller using bootstrap