web-dev-qa-db-fra.com

Comment définir une hauteur de texte à 100% dans Bootstrap 3?

Je voudrais définir une textarea à 100% de hauteur. J'utilise Bootstrap 3 mais je n'y ai pas trouvé d'option. 

<div class="container">
<textarea class="form-control" rows="8"></textarea>
</div>

Comment faire?

htmlcsstwitter-bootstrap-3
17
Jay
html, body, .container {
  height: 100%;
}
textarea.form-control {
  height: 100%;
}

Voir démo sur Fiddle

14
davidkonrad

Je crois que ceci est un problème de bootstrap. J'ai rencontré un problème similaire où le textarea n'autorisait pas plus d'une ligne. J'ai trouvé (par essais et erreurs) que placer la textarea dans une div, puis ignorer l'appel form-group- (x) dans la première div, permettait de contrôler les lignes et les colonnes dans la textarea.

<div class="form-group">
    <label class="col-sm-3 control-label">Description</label>
    <div class="col-sm-9">
        <textarea class="form-control" rows="10"></textarea>
    </div>
</div>

Changer votre code pour utiliser la fonctionnalité de groupe de formulaires corrigera le problème:

<div class="form-group">
    <textarea class="form-control" rows="8"></textarea>
</div>

Cela devrait faire l'affaire pour vous.

7
Javamav
textarea { 
   min-height: 100%;
}
3
CRABOLO

Cela ne fonctionne pas pour moi pour bootstrap 3- davidkonradVous pouvez essayer de modifier le nombre de lignes

<textarea class="form-control" cols="60" rows="16"></textarea>

ou donner une hauteur fixe pour le conteneur parent

.form-group{
   height:250px;
 }
textarea{
   height:100%;
}
3
Xam1311

Vous pouvez utiliser CSS: 

textarea {
    height: 100%;
}

Par rapport à la couche supérieure.

2
skozz

Cela résout mon problème .. Je règle la hauteur sur auto! Important.

<label for="item_description" style="padding-top: 10px;">Item Description</label>
<textarea class="form-control" name="item_description" rows="3" style="height:auto !important;"></textarea>
0
John Warren Mondido Tañiza

Cela a fonctionné pour moi. J'utilise également Bootstrap 3. Mon textarea est à l'intérieur d'un conteneur.

textarea {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
0
theawesomecoder61