web-dev-qa-db-fra.com

TextAreaFor ne peut pas définir la largeur

Je ne peux pas définir la largeur ou les cols dans une zone de texte. Lignes/Hauteur fonctionne très bien. quelqu'un peut-il aider s'il vous plaît merci!

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    @Html.ValidationSummary(true)
    @Html.TextAreaFor(model => model.Comments, new {cols=60, rows=10})
    @Html.HiddenFor(model => model.UserName, new { UserName = @User.Identity })

    <div class="form-group">
        <div class="col-md-10">
            <input type="submit" value="Submit Feedback" class="btn btn-default" />
        </div>
    </div>
}

Tout conseil ou astuce serait grandement apprécié! Merci

Le code HTML rendu est (j'ai supprimé le texte du nom et de la valeur pour des raisons de sécurité:

<form action="/feedback/create" method="post"><input name="" type="hidden" value="">        
<textarea name="Comments" id="Comments" rows="10" cols="60"></textarea>
<input name="UserName" id="UserName" type="hidden" value="" username="System.Security.Principal.WindowsIdentity">        

<div class="form-group">
        <div class="col-md-10">
            <input class="btn btn-default" type="submit" value="Submit Feedback">
        </div>
 </div>

MODIFIER:

Je peux définir la largeur de la zone de texte via CSS, mais uniquement dans une certaine mesure (peut-être 15% de l'écran)

twitter-bootstraprazortwitter-bootstrap-3asp.net-mvc-5
18
MGot90

donc je l'ai compris, je pense que c'est un problème avec bootstrap importé dans un projet ASP.NET MVC5. La réponse est cependant facile. Il suffit de définir CSS aussi

    max-width: 1000px;
    width: 1000px;

Cela le corrige pour tous les types de données. Zone de texte, saisie, etc.

**** MISE À JOUR 26/08/2014 ****

Modification de ma réponse pour refléter un commentaire publié. Utilisez des pourcentages plutôt que des px pour conserver la réactivité. Le CSS doit être:

    max-width: 100%;
    width: 100%;

**** MISE À JOUR 8/29/2016 ****

Cela a été corrigé avec Bootstrap 3. Ajoutez la classe form-control qui applique le style ci-dessus

     @Html.TextAreaFor(x => x.Note, new { @class = "form-control", rows = "3" })
40
MGot90

Cela semble être une solution de rechange pour empêcher les vues échafaudées de générer des formulaires d'entrée pleine largeur.

Cependant, maintenant que nous savons qu'il est défini, nous pouvons le remplacer localement, soit dans une classe, soit directement sur l'élément (indiqué uniquement pour des raisons de simplicité ci-dessous).

La clé est de ne pas oublier de définir max-width pour remplacer celui de site.css ainsi que la propriété CSS width.

@Html.TextAreaFor(model => model.Comments, 10, 120, htmlAttributes: new {style="width: 100%; max-width: 100%;" })
12
Sebastian Rogers

J'ai eu le même problème et j'ai trouvé la pièce CSS suivante dans mon Site.css pour être la cause (que j'ai commentée).

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

Vous pouvez ajouter un attribut de classe:

@Html.TextAreaFor(model => model.Comments, new {cols=60, rows=10, @class="form-control" })
5
Andrés Nava - Azure

Votre code fonctionne bien pour moi. Vérifiez fiddle demo

Le problème serait avec style=width:something

Mieux vérifier le CSS et essayer de corriger à l'aide de la console firebug/chrome

1
Murali Murugesan