ASP.NET MVC How to increase the width of an input field using @ Html.EditorFor
I just can't fix what seems so easy. I want a textbox (editorfor) for a property of the model, and I would like to increase its width, but nothing happens. I am using the code as shown below. I tried to set the width to 500px but nothing happens. Ideally I would like the textbox to stretch across 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>
}
+3
source to share
1 answer
The default MVC template has a css rule in Site.css:
input, select, textarea { max-width: 280px; }
I usually remove this rule.
This causes problems with Bootstrap v3 input group, where the input field does not extend to its container width.
Reorder your elements and get a space:
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>
+9
source to share