select2 с темой начальной загрузки - внутри свернуть
Я не могу заставить выпадающий список select2 соответствовать родительскому контейнеру (свернуть) при скрытой инициализации. Я понимаю, что это не ошибка, потому что select2 не смог вычислить родительскую ширину. Но я не мог преодолеть это. Мне нужно, чтобы это было на 100% по отношению к родителю.
<div class="panel panel-default">
<div class="panel-body">
<div class="btn-toolbar">
<button class="btn btn-default" data-toggle="collapse" data-target="#collapse-select2" aria-expanded="false">Toggle</button>
</div>
<div class="collapse" id="collapse-select2">
<select class="form-control" data-role="select2">
<option value="1">Option #1</option>
<option value="2">Option #2</option>
<option value="3">Option #3</option>
</select>
</div>
</div>
</div>
Скрипка: здесь
Кто-нибудь может помочь?
2 ответа
На самом деле довольно простое решение:
1. CSS единственное решение
дать .select2
100% ширина и переопределение с !important
как это:
.select2 {
width: 100%!important; /* overrides computed width, 100px in your demo */
}
вот также ваша обновленная скрипка https://jsfiddle.net/1agwbfmy/6/
2. стиль тега для выбора
другой способ сделать это, как написано в документации, это дать ширину <select>
элемент с style
и он получит атрибут оттуда:<select class="form-control" data-role="select2" style="width:100%">
3. настройка плагина
наконец, вы можете установить ширину при вызове плагина в jQuery (как написано в старых документах):
$('select[data-role="select2"]').select2({
theme: 'bootstrap',
width: '100%'
});
Использование width: '100%'
свойство в конфиг.
$('[data-role="select2"]').select2({
width: '100%',
...
});