ASP .NET MVC如何增加一个inputfield的宽度与@ Html.EditorFor [英] ASP .NET MVC How to increase the width of an inputfield with @Html.EditorFor

问题描述

我只是不能修复的东西，看起来那么容易。
我想一个模型属性的文本框（editorfor），我想增加它的宽度，但什么也没有发生。我使用的是code，如下所示。我尝试了宽度为500像素，但没有任何反应。理想情况下，我想文本框伸展在容器的整个宽度。任何想法？

  @if（Model.isAnswerVisible）
    {
        ＆LT; D​​IV CLASS =表单组＆GT;
            ＆LT; D​​IV CLASS =COL-MD-10＆GT;
                ＆LT; D​​IV CLASS =输入组＆GT;
                    ＆LT;跨度类=输入组插件＆GT; @ Model.AreaNameAnswer＆LT; / SPAN＆GT;
                    @ Html.EditorFor（型号=＆GT; model.Answer，新{htmlAttributes =新的{ID =答案，风格=宽度：500像素的onkeyup =limitCharacters（），@class =表格控} }）
                ＆LT; / DIV＆GT;                @ Html.ValidationMessageFor（型号=＆GT; model.Answer，新{@class =TEXT-危险}）
                ＆LT;跨度类=glyphicon glyphicon个问题的符号ARIA隐藏=真的标题=腿地图UIT笏jouw antwoord是运德vraag＆GT;＆LT; / SPAN＆GT;
                ＆LT;标签ID =lblCountAnswer的风格=颜色：绿色＆GT; @ Model.MaxTokensAnswer＆LT; /标签＆gt;
            ＆LT; / DIV＆GT;
        ＆LT; / DIV＆GT;
    }
 

解决方案

默认MVC5模板有一个CSS规则的的site.css 的：

 输入，选择，文本区域{最大宽度：280像素; }
 

我通常删除此规则。

这会导致引导V3输入组的问题在哪里输入框不会扩展到其容器的宽度。

您反转元素的顺序，你会得到一个缺口：

取而代之的是

 ＆LT; D​​IV CLASS =行＆GT;
    ＆LT; D​​IV CLASS =COL-MD-4＆GT;
        ＆LT; D​​IV CLASS =输入组＆GT;
            ＆LT;输入类型=文本级=表格控/＆GT;
            ＆LT;跨度类=输入组BTN＆GT;
                ＆LT;按钮类=BTN BTN-小学＆GT;确定＆LT; /按钮＆GT;
            ＆LT; / SPAN＆GT;
        ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

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

这篇关于ASP .NET MVC如何增加一个inputfield的宽度与@ Html.EditorFor的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！