MVC et EditorFor largeur

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

Dans mvc 5, Il y a un réglage dans le site.css qui définit le max-width=200 pour tous les textareas. Cela m'a confus jusqu'à ce que je trouve ce blogpost. http://weblogs.asp.net/paullitwin/visual-studio-2013-asp-net-mvc-5-scaffolded-controls-and-bootstrap comme le dit Paul Litwin:

Oui, Microsoft définit pour une raison quelconque la largeur maximale de tous entrée, Sélection et contrôles textarea à 280 pixels. Pas sûr que le motivation derrière cela, mais jusqu'à ce que vous changiez cela ou que vous dépassiez cela par affecter les contrôles de formulaire à une autre classe CSS, vos contrôles ne sera jamais en mesure d'ê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 changez la largeur maximale en 600px

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

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

Vous devrez peut-être ajouter "!important " pour l'attribut css pour s'assurer qu'il remplace la valeur par défaut pour TextBoxFor par exemple width: 50px !important;

Comme mentionné précédemment, l'endroit où vous voulez aller est dans le site.css

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

Vous pouvez définir n'importe quelle valeur par défaut ou supprimer le bloc pour obtenir le bootstrap par défaut de 100%. Personnellement, j'ai ajouté les options suivantes afin que je puisse 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%;
}

Avec BootStrap 3

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

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 faire

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

Ensuite, dans votre modèle d'éditeur pour String ajoutez ceci à votre modèle

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

Patrik Lindström est correct avec la largeur Max.

J'ai pu contourner cela en définissant la largeur maximale et la largeur

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

Ci-dessus répondez oui et non. Nous devons utiliser l'outil de développement pour vérifier quels styles utilisés et les modifier, ils peuvent avoir max-width, width; puis créer propre !CSS important pour l'appliquer, mon cas:

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

Voir le résultat de l'image ci-jointe.

Entrez la description de l'image ici