Ширина выпадающего списка
Если запустить плагин Select2 безо всяких параметров, то он будет выглядеть не очень красиво - часть его будет обрезана:
Скопировано
<script src='//code.jquery.com/jquery-3.4.1.min.js'></script>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css'>
<script src='https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js'></script>
<select>
<option>Первое значение</option>
<option>Второе значение</option>
<option>Третье значение</option>
</select>
<script>
jQuery( 'select' ).select2();
</script>
Показать код
Чтобы исправить ситуацию, используем параметр width: 'auto'
:
Скопировано
<script src='//code.jquery.com/jquery-3.4.1.min.js'></script>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css'>
<script src='https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js'></script>
<select>
<option>Первое значение</option>
<option>Второе значение</option>
<option>Третье значение</option>
</select>
<script>
jQuery( 'select' ).select2({
width: 'auto'
});
</script>
Показать код
Параметр width: '100%'
заставит Select 2 растянуться во всю ширину родительского блока:
Скопировано
<script src='//code.jquery.com/jquery-3.4.1.min.js'></script>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css'>
<script src='https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js'></script>
<select>
<option>Первое значение</option>
<option>Второе значение</option>
<option>Третье значение</option>
</select>
<script>
jQuery( 'select' ).select2({
width: '100%'
});
</script>
Показать код
А если надо, чтобы сами значения выпадающего списка были в одну строку (то есть без переносов), то используем параметр dropdownAutoWidth : true
.
Без использования параметра dropdownAutoWidth
:
Скопировано
<script src='//code.jquery.com/jquery-3.4.1.min.js'></script>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css'>
<script src='https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js'></script>
<select>
<option>Первое значение</option>
<option>Второе какое-то длинное значение</option>
<option>Третье значение</option>
</select>
<script>
jQuery( 'select' ).select2();
</script>
Показать код
С использованием параметра dropdownAutoWidth
:
Скопировано
<script src='//code.jquery.com/jquery-3.4.1.min.js'></script>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css'>
<script src='https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js'></script>
<select>
<option>Первое значение</option>
<option>Второе какое-то длинное значение</option>
<option>Третье значение</option>
</select>
<script>
jQuery( 'select' ).select2({
dropdownAutoWidth : true
});
</script>
Показать код
А вот результат совместного использования двух параметров: width
и dropdownAutoWidth
:
Скопировано
<script src='//code.jquery.com/jquery-3.4.1.min.js'></script>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css'>
<script src='https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js'></script>
<select>
<option>Первое значение</option>
<option>Второе какое-то длинное значение</option>
<option>Третье значение</option>
</select>
<script>
jQuery( 'select' ).select2({
width: 'auto',
dropdownAutoWidth : true
});
</script>
Показать код
Сам select принял ширину первого параметра, а значения выпадающего списка вытянулись в одну строку.