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

The default mvc template has a css rule: input, select, textarea { max-width: 280px; }. I usually take this out. — Jasen
– Jasen, Commented May 18, 2015 at 22:55
@Jasen I did not know about this default css rule, lol. That fixed it. Thanks for your comment. — Kevainzorz
– Kevainzorz, Commented May 19, 2015 at 12:25
@Kevainzorz you can use a modern browser to determine the current styles that are applied and where they are defined (press F12 in most cases and explore options) — fdomn-m
– fdomn-m, Commented May 19, 2015 at 12:30

Jasen · Accepted Answer · 2015-05-19 17:38:34Z

12

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:

enter image description here

Instead of this

enter image description here

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

answered May 19, 2015 at 17:38

Jasen

14.3k3 gold badges55 silver badges70 bronze badges

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

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related