web-dev-qa-db-ja.com

MVCとエディター

ビューでEditorForコントロールの幅を設定できますか？

私はいくつかのパラメーターを設定しました：

[Required, DisplayName("Payee Name"), StringLength(50)]
public string Name { get; set; }

ただし、レンダリングされるテキストボックスの幅を設定することはできません。

<table width="300" border="0" cellpadding="3" cellspacing="0">
    <tr>
        <td>
            <%=Html.LabelFor(m => m.Name)%>
        </td>
        <td>
            <%=Html.EditorFor(m => m.Name)%>
        </td>
    </tr>

これは何とかできますか？

私は試した：

<%=Html.EditorFor(m => m.Name, new {width=50)%>

しかし、喜びはありません...

c#asp.net-mvc-2editorfor
24
Craig

EditorForの代わりに、TextBoxForを使用します。

<%=Html.TextBoxFor(m => m.Name, new {style = "width:50px"})%>
34
Michael Maddox

CSSを使用してコントロールの幅をスタイルすることの何が問題になっていますか？

18
Erik Funkenbusch

Mvc 5では、すべてのテキストエリアにmax-width = 200を設定するsite.cssの設定があります。このブログ投稿を見つけるまで、それは私を混乱させました。 http://weblogs.asp.net/paullitwin/visual-studio-2013-asp-net-mvc-5-scaffolded-controls-and-bootstrap Paul Litwinが述べているように：

はい、マイクロソフトは何らかの理由で、すべての入力、選択、およびテキストエリアコントロールの最大幅を280ピクセルに設定しています。これの背後にある動機は不明ですが、これを変更するか、フォームコントロールを他のCSSクラスに割り当てることによってこれをオーバーライドするまで、コントロールは280pxを超えることはできません。

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

実用的な場合は、max-widthを600pxなどに変更します

10
Patrik Lindström

<%=Html.EditorFor(m => m.Name, new {width=50)%>をこれに置き換えます

<%=Html.EditorFor(m => m.Name,new { htmlAttributes = new { style = "width: 50px" }, }
5
Sergio Caretta

With BootStrap 3

@Html.EditorFor(model => model.PriceIndicatorDesc, new { htmlAttributes = new { @class = "form-control", @style = "width:280px" } })
3
Joe

前述したように、行きたい場所はsite.cssです

input,
select,
textarea {
    max-width: 280px;
}

そこに必要なデフォルト値を設定するか、ブロックを削除してBootstrapデフォルトの100％を取得できます。個人的に、次のオプションを追加して、問題のフィールド：

.form-control-25 {
    max-width: 25%;
}

.form-control-50 {
    max-width: 50%;
}

.form-control-75 {
    max-width: 75%;
}

.form-control-100 {
    max-width: 100%;
}
2
Steven Frank

「！important」をcss属性に追加して、TextBoxForのデフォルトを確実にオーバーライドする必要がある場合があります。 width：50px！important;

2
David Steele

通常のCSSルール以外のカスタム幅が必要で、エディターテンプレートを使用している場合

<%=Html.EditorFor(m => m.Name, new { Width = 50})%>

次に、Stringのエディターテンプレートでこれをテンプレートに追加します

@Html.TextBox(s => {
...
    if (ViewBag.Width != null )
    {
       s.Width = ViewBag.Width;
    }
 }).Bind(Model).GetHtml()
0
Joe Mancuso

Site.cssのCSSファイルでは、MVCプロジェクトを最初に作成したときにVSがすべてを自動生成した場合、デフォルトの最大幅は280pxです。幅の大きさに関係なく@html.editorfor特定のIDで、以下の構文によって制限されます。

input,
select,
textarea{
     max-width:280px
}

新しいmax-widthまたはmax-heightを指定することで、ここで変更できます。

0
GuyverZero

PatrikLindströmはMax-widthで正しいです。

最大幅と幅を設定することでこれを回避することができました

@Html.EditorFor(model => model.Source, new { htmlAttributes = new { @class = "form-control", @placeholder = "Source",  @style = "width: 900px;max-width: 900px;" } })
0
H20rider

ASP.NET Coreの場合：

<%=Html.TextBoxFor(m => m.Name, new { htmlAttributes = new { style = "width: 50px" } })%>
0
Jordan B