•  12-10-2019
  •  | 
  •  

Question

Puis-je régler la largeur d'un contrôle EditorFor sur mon point de vue?

Je l'ai à quelques réglages: 

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

Cependant, je ne peux pas sembler régler la largeur de la zone de texte qui obtient rendu. 

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

Peut-on faire en quelque sorte?

J'ai essayé: 

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

Mais pas de joie ...

Était-ce utile?

La solution

Au lieu de EditorFor, utilisez TextBoxFor: 

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

Autres conseils

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

mvc 5, on a mise en site.css qui définit la largeur max = 200 pour toutes les zones de texte. Cela me confus jusqu'à ce que je trouve ce blogpost. http: // weblogs .asp.net / paullitwin / visual-studio-2013 asp-net-mvc 5 échafaudés-contrôles et d'amorçage comme Paul met Litwin il:

  

Oui, Microsoft est pour une raison quelconque réglage de la largeur maximale de tous   entrée, sélectionner, et des contrôles de zone de texte 280 pixels. Pas sûr que le   motivation derrière tout cela, mais jusqu'à ce que vous changer ceci ou cela en overrride   assignant les contrôles de formulaire à une autre classe CSS, vos commandes   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 une approche pragmatique vous modifiez la largeur max à 600px par exemple

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

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

Avec BootStrap 3 

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

Vous devrez peut-être ajouter « ! Important » à l'attribut css pour qu'il remplace la valeur par défaut pour TextBoxFor par exemple ! Width: 50px importante;

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

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

Vous pouvez définir une valeur par défaut que vous voulez il ou supprimer le bloc pour obtenir la valeur par défaut Bootstrap de 100%. Personnellement, j'ai ajouté les options suivantes pour que je puisse facilement faire quelques changements sur la base du contrôle et sur le terrain 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%;
}

Si vous avez besoin d'une largeur extérieure personnalisée d'une règle CSS normale et que vous utilisez éditeur de modèles que vous pouvez faire 

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

Ensuite, dans votre modèle de l'éditeur pour ajouter cette chaîne à votre modèle 

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

Patrik Lindström est correct avec le maximum de largeur.

j'ai pu contourner ce problème en définissant la largeur maximale et une largeur 

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

Dans votre fichier CSS pour Site.css, le maximum de largeur par défaut est 280px si vous aviez auto VS tout générer pour vous lorsque vous avez créé le projet MVC. Peu importe la taille d'une largeur que vous définissez votre @html.editorfor avec un identifiant donné, il est limité par la syntaxe ci-dessous. 

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

Vous pouvez changer ici en lui donnant une nouvelle largeur max ou hauteur max.

Pour ASP.NET de base: 

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

Au-dessus de réponse Oui et Non, nous devons utiliser développer outil pour vérifier ce que les styles utilisés et les modifier, ils peuvent avoir la largeur max, largeur; ! Ensuite, créez propre importante pour l'appliquer css, 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-joint.

entrer la description de l'image

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top