Установите ширину textarea на 100% в загрузочном модальном

Пробовал все возможные способы, но никогда не преуспевал:

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

Как сделать textarea в модульном теле div для охвата всего доступного пространства = ширина 100%?

Ответ 1

Попробуйте добавить min-width: 100% в стиль вашего текстового поля:

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

Ответ 2

Если я правильно понимаю, это то, что вы ищете.

.form-control { width: 100%; }

Смотрите демо на JSFiddle.

Ответ 3

Предоставленные решения устраняют проблему. Однако они также воздействуют на все остальные элементы textarea с одинаковым стилем. Мне пришлось решить эту проблему и просто создать более конкретный селектор. Вот что я придумал, чтобы предотвратить инвазивные изменения.

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

Пока этот селектор может показаться агрессивным. Это помогает сдерживать textarea в области содержимого самого модала.

Кроме того, представленное выше решение min-width работает с основными модальностями начальной загрузки, хотя у меня возникли проблемы при использовании его с модами angular -ui-bootstrap.

Ответ 4

Вы также можете просто добавить атрибут row = "количество строк", например

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

Это увеличит количество строк в текстовом поле, которое очень похоже на style="min-width: 100%" 100% или 80% и т.д.