Ensemble textarea largeur à 100% dans le bootstrap modal

A essayé tous les moyens 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 le textarea en modal-body div pour couvrir tout l'espace disponible = largeur de 100%?

  • Mon textarea était à l'intérieur d'un div class="input-group" quand j'ai enlevé entrée-groupe (que je n'ai pas vraiment besoin) le textarea class="form-control" élargi pour remplir la largeur disponible automatiquement
  • Lui donner une grande valeur pour les cols, disons 500. Il va montrer un complet, avec vue
InformationsquelleAutor Bartosz | 2014-07-05
  1. 115

    Essayez d'ajouter min-width: 100% de style de votre textarea:

    <textarea class="form-control" style="min-width: 100%"></textarea>
    • Est-il d'un support natif pour le rendre fullwidth
    InformationsquelleAutor 1_bug
  2. 9

    Si je comprends bien droit c'est ce que vous cherchez. 

    .form-control { width: 100%; }

    Voir démo sur JSFiddle.

    InformationsquelleAutor Izzy
  3. 3

    Vous pouvez aussi tout simplement ajouter l'attribut 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 permettra d'accroître le nombre de lignes dans le textarea qui est beaucoup semblable à style="min-height: 100%" 100% ou 80% et min-width: 50% pour la largeur, etc. Aussi row=7 de modifier la hauteur et cols=50 modifie la largeur de la zone de texte.

    • cols des changements de largeur tandis que les lignes des changements de hauteur.
    InformationsquelleAutor NomanJaved
  4. 2

    Fourni des solutions de résoudre le problème. Cependant, ils ont également un impact sur tous les autres textarea éléments avec le même style. J'ai eu à résoudre ce et viens de créer un plus spécifiques sélecteur. Voici ce que j'ai trouvé pour éviter envahissantes changements.

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

    Tout ce sélecteur peut sembler agressif. Il permet de retenir la textarea dans la zone de contenu de la modale de lui-même.

    En outre, la min-width solution présentée ci-dessus, fonctionne avec la base de bootstrap des modaux, même si j'ai eu des problèmes lors de l'utilisation avec angular-ui-bootstrap modals.

    InformationsquelleAutor Itanex
  5. 1

    J'ai eu le même problème. Je l'ai corrigé en ajoutant ce bout de code à l'intérieur de la zone de texte du style.

    resize: vertical;

    Vous pouvez vérifier l'Amorçage de référence ici

    InformationsquelleAutor Günay Gültekin
  6. -1

    Je suis nouvelle .NET/MVC, programmation, mais ma compréhension est que le Site.fichier css (dans le dossier Contenu dans MVC) est un site de niveau de remplacement pour Bootstrap CSS, vous permettant de remplacer bootstrap natif de paramètres dans un portable et non-destructive manière (par exemple, vous pouvez facilement enregistrer et réutiliser votre site.css modifications lors de la mise à jour de Bootstrap sur votre système.)

    Dans Le Bootstrap 3.0.0, Site.css est la suivante paramètre de style:

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

    D'autres blogs ont suggéré que cette 280px largeur a été ajouté à la hâte près d'une date de sortie, dans un désir de rendre l'INTERFACE utilisateur de regarder mieux que 100% de la largeur de l'entrée. Heureusement, il a été placé dans un "visible" de l'emplacement dans le fichier de site afin de vous serait-il un avis.

    Il suffit de modifier le paramètre de largeur, soit pour tous les trois types d'entrée, ou sortir textarea et lui donner son propre paramètre si vous voulez laisser les autres seuls.

    InformationsquelleAutor John Kowtko