TextAreaFor Ne Peut Pas Régler La Largeur

Je ne peux pas régler la largeur de la ou des cols en atextarea. Lignes/Hauteur fonctionne très bien. quelqu'un peut s'il vous plaît aider 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>
}

Des conseils ou des conseils seraient grandement appricated! grâce

Le rendu au format HTML est (j'ai enlevé le nom et la valeur du texte 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>

EDIT:

Je peux régler la largeur de la zone de texte via CSS, mais seulement dans une certaine extension ( peut-être 15% de l'écran)

Qu'est-ce que le rendu HTML de la page?
J'ai mis à jour la question pour afficher le code HTML

InformationsquelleAutor MGot90 | 2014-03-06

38

j'ai donc pensé à elle, je crois que c'est un problème avec bootstrap importés à un ASP.NET MVC5 projet. La réponse est facile, cependant. Juste mettre CSS trop
```
    max-width: 1000px;
    width: 1000px;
```
Qu'il fixe pour tous les types de données. Textarea, entrée, etc.

**** Mise à JOUR 8/26/2014 ****

Changé ma réponse à réfléchir sur un commentaire posté. Utiliser des pourcentages plutôt que px pour garder de la réactivité. Le CSS doit être:
```
    max-width: 100%;
    width: 100%;
```
**** Mise à JOUR 8/29/2016 ****

Cela a été résolu avec Bootstrap 3. Ajoutez la classe forme de contrôle de la qui s'applique au-dessus de style
```
     @Html.TextAreaFor(x => x.Note, new { @class = "form-control", rows = "3" })
```
- Thumbs up si cela fonctionne pour vous aussi!
- Il a travaillé pour moi aussi. Je ne pense pas que c'est la solution parfaite, mais c'est le seul que j'ai couold trouver jusqu'à présent. Et j'ai cherché....
- Vérifier que: Si vous modifiez max-width à 100% au lieu de 1000px vous obtenez le bootstrap le redimensionnement de la fonctionnalité de retour. Vous n'avez même pas besoin de s'embêter réglage de la largeur.
- Merci!!!! Vous avez sauvé mon temps, l'homme!
- Cela peut avoir été fixé dans BS3 depuis que cette question a été posée. À l'aide de rows est le préféré de réponse. @Html.TextAreaFor(x => x.Note, new { @class = "form-control", rows = "3" }).
- Merci @Jess j'ai mis à jour ma réponse à inclure dans votre commentaire
- Merci! Bootstrap 3+ version a fonctionné pour moi
InformationsquelleAutor MGot90
11

Cela semble être une chute en arrière pour éviter le scaffolding vues générant sur toute la largeur des formulaires d'inscription.

Cependant, maintenant, nous savons que c'est ensemble que nous pouvons remplacer localement, soit dans une classe ou directement sur l'élément (illustré purement pour des raisons de simplicité ci-dessous).

La clé est de se rappeler de définir max-width pour remplacer celui en place.css ainsi que la largeur d'une propriété CSS.
```
@Html.TextAreaFor(model => model.Comments, 10, 120, htmlAttributes: new {style="width: 100%; max-width: 100%;" }) 
```
InformationsquelleAutor Sebastian Rogers
5

Vous pouvez ajouter un attribut de classe:
```
@Html.TextAreaFor(model => model.Comments, new {cols=60, rows=10, @class="form-control" })
```
- Cela a presque fonctionné, mais je n'ai pas mis à la largeur de la div!
- Si vous ajoutez le form-control classe à votre textarea vous pouvez faire de l'entrée de l'étendre à de son conteneur parent. J'ai mis à jour ma réponse.
- J'ai essayé (code copié à partir de bootstrap API) et encore maxes
- M. Porta Ce que vous avez dit dans votre solution est vrai. Ajout du formulaire de contrôle de la classe fera l'entrée d'étendre son contrôle parent, mais seulement dans une certaine mesure. Il ne s'étend pas passé une certaine largeur.
InformationsquelleAutor Andrés Nava - .NET
5

J'ai eu le même problème et a trouvé le morceau suivant du CSS de mon Site.css pour être la cause (que j'ai commenté).
```
/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}
```
- Vraiment un bon point. J'ai juste enlevé textare à partir de là, et cela a fonctionné.
- Oh merci merci merci!!!!! Qui était-il! (Stupide de Site par défaut.css!) Ce qui est vraiment frustrant, c'est que je suis assez sûr que j'ai eu ça avant, et apparemment oublié. (D'OH!) 😉
InformationsquelleAutor Rawden Hoff
1

Votre code fonctionne très bien pour moi. Découvrez la violon démo

Le problème serait de style=width:something

Mieux vérifier le CSS et essayer de les résoudre avec l'aide de firebug/chrome console
- Cela a presque fonctionné, mais je n'ai pas mis à la largeur de la div!
InformationsquelleAutor Murali Murugesan

Vous devez vous connecter pour publier un commentaire.