web-dev-qa-db-fra.com

Définir la largeur de la zone de texte à 100% en mode bootstrap

A essayé de toutes les manières possibles, mais n'a jamais réussi:

    <div style="float: right">
        <button type="button" value="Decline" class="btn btn-danger" data-toggle="modal" data-target="#declineModal">Decline</button>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="declineModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title" id="myModalLabel">Comment</h4>
                    </div>
                    <div class="modal-body">
                        <textarea class="form-control col-xs-12"></textarea>
                    </div>
                    <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-danger">Decline</button>
                </div>
            </div>
        </div>
    </div>

Comment faire en sorte que textarea dans modal-body div couvre tout l’espace disponible = largeur 100%?

html5css3twitter-bootstraptextareabootstrap-modal
47
Bartosz

Essayez d’ajouter min-width: 100% au style de votre zone de texte:

<textarea class="form-control" style="min-width: 100%"></textarea>
107
1_bug

Si je comprends bien, c’est ce que vous cherchez. 

.form-control { width: 100%; }

Voir démo sur JSFiddle .

9
Izzy

Les solutions fournies résolvent le problème. Cependant, ils ont également un impact sur tous les autres éléments textarea avec le même style. Je devais résoudre ce problème et je venais de créer un sélecteur plus spécifique. Voici ce que je suis venu avec pour prévenir les changements invasifs.

.modal-content textarea.form-control {
    max-width: 100%;
}

Bien que ce sélecteur puisse paraître agressif. Cela permet de restreindre la textarea dans la zone de contenu du modal lui-même. 

De plus, la solution min-width présentée ci-dessus fonctionne avec les modaux d'amorçage de base, bien que des problèmes se soient posés lors de l'utilisation de modaux angular-ui-bootstrap.

2
Itanex

Vous pouvez également simplement ajouter les attributs row="number of rows" et cols="number of columns" comme

<div class="modal-body">
    <textarea class="form-control col-xs-12" rows="7" cols="50"></textarea>
</div>

Cela augmentera le nombre de lignes dans la zone de texte qui est très similaire à style="min-height: 100%" 100% ou 80% et à min-width: 50% pour la largeur, etc. Aussi row=7 modifie la hauteur et cols=50 change la largeur de textarea.

2
NomanJaved

J'ai eu le même problème. Je l'ai corrigé en ajoutant cette partie de code dans le style de la zone de texte.

resize: vertical;

Vous pouvez vérifier la référence Bootstrap ici

0
Günay Gültekin