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

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>
    }

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 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>

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0