increase text box size bootstrap (ASP.NET MVC)

Question

Is there a way to increase the size (length) of textboxes in a horizontal form?

<div class="form-horizontal">
    <div class="form-group">
        @Html.LabelFor(model => model.Name, new { @class = "control-label col-md-2" })
        <div class="col-md-10">
                @Html.TextBoxFor(model => model.Name, new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.Name)
            </div>
        </div>

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

I have tried changing the col-md-* classes but it hasn't worked.

Solution 1

An alternative way to do this is to just change the col-md-x class on the div that wraps your textbox and validation message to your desired width.

For example, change this:

<div class="col-md-10">
     @Html.TextBoxFor(model => model.Name, new { @class = "form-control" })
     @Html.ValidationMessageFor(model => model.Name)
</div>

to this:

<div class="col-md-5">
     @Html.TextBoxFor(model => model.Name, new { @class = "form-control" })
     @Html.ValidationMessageFor(model => model.Name)
</div>

And now your textbox will be the 5 column width instead of 10. This requires no extra classes and an added bonus is that if you have a longer validation message, it will wrap within the same space as your textbox.

Solution 2

All answers were helpful.

My sollution was to change the default max-width in my css cause it was restricting the size

input, select, textarea {
    max-width: 500px;
}

Then changing the col-md-* class worked fine.

thanks

Solution 3

I'd add a class to your textbox:

 @Html.TextBoxFor(model => model.Name, new { @class = "form-control long-textbox" })

Then style it in your CSS:

.long-textbox{
    width:300px;
}

You can use the size attribute, but I feel this is more of a stylistic thing and should be managed in CSS.

Solution 4

usually your tag has a max-width field set. If you change it as

text {
    max-width: 100%;
    width: 100%;
}

then you can achieve the full available width. If you are making this for multiple device resolutions, then it would be better to use percentage width rather than using the fixed width in px. Hope this helps you.

Solution 5

In Bootstrap 3, the form-control class sets input elements to be 100% of the container.

Alternatively you can manually apply your own style:

@Html.TextBoxFor(model => model.Name, new { @class = "wide-control" })

With CSS like this:

input.wide-control {
    width: 300px;
}

View more solutions

Comments

[DavidG]

Wish I'd called my class long-textbox now, then we'd be almost identical haha!

[Win]

HTML size attribute is deprecated.

[Rafael A. M. S.]

Where can i find this info please? Are you sure INPUT size is deprecated?

[Win]

You are correct input size is still valid. These days, a lot front-end designer/developer use width in CSS for input to consistent across all controls in all browsers. Anyhow, I take it back.

[Grungondola]

I modified this for mine to just: max-width: unset;