MVC und EditorFor-Breite

Question

Kann ich die Breite eines EditorFor-Steuerelements in meiner Ansicht festlegen?

Ich habe ein paar Parameter festgelegt:

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

Allerdings kann ich nicht scheinen, um die Breite des Textfeldes, die gerendert wird, zu setzen.

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

Ist das irgendwie machbar?

Ich habe es versucht:

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

Aber keine Freude...

Answer 1

Verwenden Sie anstelle von EditorFor TextBoxFor:

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

Answer 2

Was ist falsch daran, CSS zur Gestaltung der Kontrollbreite zu verwenden?

Answer 3

In mvc 5 gibt es eine Einstellung in site.css, die die max-width=200 für alle Textareas setzt. Das verwirrte mich, bis ich diesen Blogpost fand. http://weblogs.asp.net/paullitwin/visual-studio-2013-asp-net-mvc-5-scaffolded-controls-and-bootstrap wie Paul Litwin es ausdrückt:

Ja, Microsoft setzt aus irgendeinem Grund die maximale Breite aller Eingabe-, Auswahl- und Textarea-Steuerelemente auf 280 Pixel. [ ] Motivation dahinter, aber bis Sie dies ändern oder aufheben, indem Sie die Steuerelemente einer anderen CSS-Klasse zuweisen, werden Ihre Steuerelemente nie breiter als 280 Pixel sein können.

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

Wenn Sie also ein Pragmatiker sind, ändern Sie die maximale Breite auf z.B. 600px

Answer 4

Ersetzen Sie <%=Html.EditorFor(m => m.Name, new {width=50)%> für diese

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

Answer 5

Mit BootStrap 3

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