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">×</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%?
Fügen Sie min-width: 100%
zum Stil Ihres Textbereichs hinzu:
<textarea class="form-control" style="min-width: 100%"></textarea>
Wenn ich richtig verstehe, ist es das, wonach Sie suchen.
.form-control { width: 100%; }
Siehe Demo auf JSFiddle .
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.
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.
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.