wake-up-neo.net

Setzen Sie die Breite des Textbereichs im Bootstrap-Modus auf 100%

Hat alle möglichen Möglichkeiten ausprobiert, aber es ist nie gelungen:

    <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> 

Wie kann man die Textarea in modal-body div so gestalten, dass sie den gesamten verfügbaren Platz abdeckt = width 100%?

47
Bartosz

Fügen Sie min-width: 100% zum Stil Ihres Textbereichs hinzu:

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

Wenn ich richtig verstehe, ist es das, wonach Sie suchen. 

.form-control { width: 100%; }

Siehe Demo auf JSFiddle .

9
Izzy

Die bereitgestellten Lösungen beheben das Problem. Sie wirken sich jedoch auch auf alle anderen textarea-Elemente mit demselben Stil aus. Ich musste das lösen und habe gerade einen spezifischeren Selektor erstellt. Hier ist das, worauf ich gekommen bin, um invasive Veränderungen zu verhindern.

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

Während dieser Wähler kann aggressiv wirken. Es hilft, den textarea auf den Inhaltsbereich des Modals selbst zu beschränken. 

Darüber hinaus funktioniert die oben dargestellte min-width-Lösung mit grundlegenden Bootstrap-Modalen, obwohl ich Probleme mit der Verwendung von eckigen Ui-Bootstrap-Modalen hatte.

2
Itanex

Sie können auch einfach das Attribut row="number of rows" und cols="number of columns" wie hinzufügen

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

Dadurch wird die Anzahl der Zeilen im Textbereich erhöht, die style="min-height: 100%" 100% oder 80% und min-width: 50% für Breite usw. sehr ähnlich ist. Außerdem ändert row=7 die Höhe und cols=50 die Breite des Textbereichs.

2
NomanJaved

Ich hatte das gleiche Problem. Ich habe es korrigiert, indem ich diesen Code innerhalb des Textbereichs eingefügt habe.

resize: vertical;

Sie können die Bootstrap-Referenz hier überprüfen.

0