Réglage de la largeur d'un Textarea dans le Bootstrap 3

J'ai été la recherche d'un moyen de faire mon 'textarea' aller à 100% à l'intérieur de la colonne. J'ai vu un peu différentes façons (aucun de qui j'ai été en mesure de travailler) pour faire un 'textarea' augmenter à 100% dans le Bootstrap. J'ai tout d'personnalisés en ligne styles CSS à l'aide class="form-control col-lg-12" à l'écrasement de Bootstrap CSS.

Quelqu'un a un travail suggestion qui permettrait de liquide de re-dimensionnement?

Voici le code que j'ai. Droit maintenant, la largeur va de, un peu après le texte de l'espace réservé. 

<div class="row">
            <div class="col-lg-7">
                <h2>@Model.EmployeeName</h2>
                <h3>Employee #: @Model.EmployeeNumber</h3>

                <h5>(Optional): Exception Log comments related to this shift for your Supervisor/Time Keeper.</h5>
                <textarea rows="2" placeholder="Exception Log comments."></textarea>
            </div>
            <div class="col-lg-5 text-right">
                <div ng-controller='TimeCtrl'>
                    <h2>{{ clock | date:'fullDate'}}</h2>
                    <h1>{{ clock | date:'HH:mm:ss'}}</h1>
                    <input type="submit" class="btn btn-xxlarge btn-success" value="Punch In" />
                </div>
            </div>
        </div>
InformationsquelleAutor Caverman | 2016-03-10
  1. 9

    Je crois bootstrap, propre élément de formulaire (de la classe form-control) est ce qui va rendre les éléments de formulaire de prendre toute la largeur de la colonne, ils sont en.

    <textarea class="form-control"></textarea>
    • J'allais justement écrire que
    • Ne semble pas fonctionner pour moi. J'ai essayé la suggestion lors de mes recherches, avec la seule différence d'avoir une colonne de réglage à l'. C'est ce que j'avais essayé avant class="form-control col-lg-6"
    • Êtes-vous en mesure de reproduire le problème avec quelque chose comme jsfiddle?
    • Voici un violon avec votre code + à l'aide du formulaire de contrôle sur le textarea. jsfiddle.net/sL67rkLs
    InformationsquelleAutor georaldc
  2. 4

    class="form-control" doit travailler. Si cela ne fonctionne pas, cela signifie que quelque part dans le fichier css, max-width propriété est définie pour le texte de la zone qui limite la largeur. Dans ce cas, vérifier le site.fichier css et retirez max-width de la propriété.

    InformationsquelleAutor Shah Aadil
  3. 3

    Il suffit d'ajouter un "form-control" classe textarea. Si vous travaillez sur un petit écran, col-lg-7 et le col-lg-5 est de couvrir toute la fenêtre.

    Et vos colonnes de texte alings sont différents. Vous pouvez voir le col-sm-12 de votre écran.

    <textarea class="form-control" rows="2" placeholder="Exception Log comments."></textarea>
    InformationsquelleAutor oguzhancerit
  4. 1

    Si vous venez d'ajouter un peu de CSS personnalisé, vous pouvez le forcer à utiliser la totalité du conteneur largeur

    min-width: 100%
max-width: 100%

    Cependant, l'utilisation de la classe de bootstrap "form-control" réalise également ce

    • La réinitialisation de ces valeurs est la clé dans le bootstrap. Perspicace. Merci.
    InformationsquelleAutor Peter Finn
  5. 0

    Simplement ajouter form-control classe à votre textarea si vous voulez 100% de largeur sur elle, pas besoin d'ajouter col-lg-12 bcoz form-control classe donne le 100% de la largeur du parent de l'élément.

    <textarea class="form-control" rows="4" placeholder="Exception Log comments."></textarea>
    InformationsquelleAutor Bhuwan