ASP .NET MVC How to increase the width of an inputfield with @Html.EditorFor

Question

I just cant fix something that seems so easy. I want a textbox (editorfor) for a model property and I would like to increase its width but nothing is happening. I'm using the code as listed below. I tried setting the width to 500px but nothing happens. Ideally I would like the textbox to stretch over the full width of the container. Any ideas?

@if (Model.isAnswerVisible) { <div class="form-group"> <div class="col-md-10"> <div class="input-group"> <span class="input-group-addon">@Model.AreaNameAnswer</span> @Html.EditorFor(model => model.Answer, new { htmlAttributes = new { id = "answer", style = "width: 500px", onkeyup = "limitCharacters()", @class = "form-control" } }) </div> @Html.ValidationMessageFor(model => model.Answer, "", new { @class = "text-danger" }) <span class="glyphicon glyphicon-question-sign" aria-hidden="true" title="Leg kort uit wat jouw antwoord is op de vraag"></span> <label id="lblCountAnswer" style="color: green">@Model.MaxTokensAnswer</label> </div> </div> } 

Answer 1

The default MVC5 template has a css rule in Site.css:

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

I usually remove this rule.

It causes problems with Bootstrap v3 input group where the input box does not extend to its container's width.

Reverse the order of your elements and you get a gap:

Instead of this

<div class="row"> <div class="col-md-4"> <div class="input-group"> <input type="text" class="form-control" /> <span class="input-group-btn"> <button class="btn btn-primary">OK</button> </span> </div> </div> </div>