web-dev-qa-db-fra.com

MVC et EditorFor largeur

Puis-je définir la largeur d'un contrôle EditorFor sur ma vue?

J'ai défini quelques paramètres:

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

Cependant, je n'arrive pas à définir la largeur de la zone de texte rendue.

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

Cela peut-il être fait d'une manière ou d'une autre?

J'ai essayé:

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

Mais pas de joie ... 

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

Au lieu de EditorFor, utilisez TextBoxFor:

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

Quel est le problème avec l'utilisation de CSS pour le style de votre largeur de contrôle?

18
Erik Funkenbusch

Dans mvc 5, il existe un paramètre dans site.css qui définit la largeur maximale = 200 pour toutes les zones de texte. Cela m'a confondu jusqu'à ce que j'ai trouvé cet article de blog. http://weblogs.asp.net/paullitwin/visual-studio-2013-asp-net-mvc-5-scaffolded-controls-and-bootstrap comme le dit Paul Litwin:

Oui, pour une raison quelconque, Microsoft définit la largeur maximale de tous les contrôles de saisie, de sélection et de zone de texte jusqu'à 280 pixels. Pas sûr que le la motivation derrière cela, mais jusqu’à ce que vous changiez ceci ou le remplaçiez par assigner les contrôles de formulaire à une autre classe CSS, vos contrôles ne pourra jamais être plus large que 280px.

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

Donc, si vous êtes pragmatique, vous modifiez la largeur maximale, par exemple 600px

10
Patrik Lindström

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

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

Avec BootStrap 3 

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

Comme mentionné précédemment, le site que vous souhaitez visiter se trouve dans site.css

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

Vous pouvez définir la valeur par défaut de votre choix ou supprimer le bloc pour obtenir la valeur par défaut de Bootstrap de 100%. Personnellement, j'ai ajouté les options suivantes afin de pouvoir facilement apporter des modifications en fonction du contrôle et du champ en question:

.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

Vous devrez peut-être ajouter "! Important" à l'attribut css pour vous assurer qu'il remplace la valeur par défaut pour TextBoxFor, par exemple. largeur: 50px! important;

2
David Steele

Si vous avez besoin d’une largeur personnalisée en dehors d’une règle CSS normale et que vous utilisez des modèles d’éditeur, vous pouvez le faire.

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

Ensuite, dans votre template d'éditeur pour String, ajoutez ceci à votre template

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

Dans votre fichier CSS pour Site.css, la largeur maximale par défaut est 280px si VS avait tout généré automatiquement pour vous lors de la création du projet MVC. Quelle que soit la largeur de votre @html.editorfor avec un identifiant donné, il est limité par la syntaxe ci-dessous.

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

Vous pouvez le changer ici en lui attribuant une nouvelle largeur maximale ou une hauteur maximale.

0
GuyverZero

Patrik Lindström est correct avec la largeur maximale.

J'ai pu contourner ce problème en réglant la largeur et la largeur maximales

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

Pour ASP.NET Core:

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