Cannot change TextBoxFor width

Question

Here is a simple html code from my ASP .NET MVC 5 project:

@using (Html.BeginForm()) {
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <div class="form-group">
            @Html.TextBoxFor(model => model.Description, htmlAttributes: new { @class = "col-md-12", style = "Width:1000px" })
        </div>

        <div class="form-group">
            <div class="col-md-12">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </div>
    </div>

}

I am trying to get a text box that is wide. However, no matter what I try for the width value, the text box width stays small.

I moved from EditorFor to TextBoxFor hoping I will have better control of width:-(.

Please help me understand what is it that I am missing? Regards.

You could also try replacing the style = "" with @style = "width:400px;" — Abbath
– Abbath, Commented Nov 23, 2014 at 21:44
the class "col-md-12" is only for divs, and you are using it on the textbox, maybe that's the problem or you have another style in a css file or in the view — Jorge F
– Jorge F, Commented Nov 24, 2014 at 17:30

JuanR · Accepted Answer · 2017-11-07 05:21:50Z

3

This question has been out there for a while and I stumbled upon it while looking for an answer to the same problem.

It turns out the default VS template comes with a file called Site.css which includes the following style:

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

So either change the max-width on this style or override the max-width with another style rule.

answered Nov 7, 2017 at 5:21

JuanR

7,8811 gold badge23 silver badges33 bronze badges

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

1 Comment

user7329164 Over a year ago

+1. This one had me going insane. Nice catch. This is something you would definitely not expect. Thanks!

wegelagerer · Accepted Answer · 2014-11-23 21:43:27Z

0

The thing is you are using Bootstrap. Try removing classes from the outer divs or even bootstrap completely.

answered Nov 23, 2014 at 21:43

wegelagerer

3,74011 gold badges44 silver badges61 bronze badges

Collectives™ on Stack Overflow

Cannot change TextBoxFor width

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related