ASP .NET MVC如何通过@ Html.EditorFor增加输入字段的宽度 [英] ASP .NET MVC How to increase the width of an inputfield with @Html.EditorFor

问题描述

我只是无法修复似乎这么容易的东西。
我想要一个文本框（editorfor）为一个模型属性，我想增加其宽度，但没有发生。我使用下面列出的代码。我试图将宽度设置为500px，但什么也没有发生。理想情况下，我想让文本框在容器的整个宽度。任何想法？

  @if（Model.isAnswerVisible）
 {
< div class = -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 -signaria-hidden =truetitle =Leg kort uit wat jouw antwoord is op de vraag>< / span> 
< label id =lblCountAnswerstyle =color：green> @ Model.MaxTokensAnswer< / label> 
< / div> 
< / div> 
} 
  

解决方案

默认的MVC5模板有css规则在 Site.css 中：

  input，select，textarea {max-width：280px; } 
  

我通常会移除此规则。

它会引起Bootstrap v3输入组的问题，其中输入框不会扩展到其容器的宽度。

颠倒元素的顺序，会产生空白： p>

>

而不是这

 < div class =row> 
< div class =col-md-4> 
< div class =input-group> 
< input type =textclass =form-control/> 
< span class =input-group-btn> 
< button class =btn btn-primary>确定< / button> 
< / span> 
< / div> 
< / div> 
< / div> 
  

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如何通过@ Html.EditorFor增加输入字段的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！