c# - MVCとEditorFor幅

Question

ビューで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)%>

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

score 35 · Accepted Answer

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

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

score 18 · Accepted Answer

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

score 10 · Accepted Answer

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 は次のように述べています。

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

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

したがって、あなたが実用的な場合は、最大幅をたとえば 600px に変更します

score 6 · Accepted Answer

ブートストラップ 3 で

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

score 2 · Accepted Answer

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

score 0 · Accepted Answer

通常の CSS ルール外のカスタム幅が必要で、エディターテンプレートを使用している場合は、次のことができます。

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

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

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

score -1 · Accepted Answer

上記の回答は「はい」と「いいえ」です。開発ツールを使用して、使用されているスタイルを確認し、それらを変更する必要があります。最大幅、幅がある場合があります。次に、独自の !important css を作成して適用します。私の場合:

<style>
    textarea,
    input[type='text'],
    .form-group,
    .form-group-lg,
    .form-horizontal,
    .form-control,     
    .text-box,
    .single-line,
    .multi-line{
        width: 800px !important;
        max-width: 1000px !important;
    }
    .multi-line{
        height: 300px !important;
    }
    .form-horizontal{
        position:absolute;
        padding-left:15%;
    }
</style>

添付の画像結果を参照してください。

ここに画像の説明を入力

c# - MVCとEditorFor幅

12 に答える 12

Related

Reference