Главная / JavaScript / Плагины / Select 2 / Ширина выпадающего списка

Ширина выпадающего списка

Если запустить плагин Select2 безо всяких параметров, то он будет выглядеть не очень красиво - часть его будет обрезана:

htmlРезультат

Скопировано

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

htmlРезультат

Скопировано

<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 растянуться во всю ширину родительского блока:

htmlРезультат

Скопировано

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

htmlРезультат

Скопировано

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

htmlРезультат

Скопировано

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

htmlРезультат

Скопировано

<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 принял ширину первого параметра, а значения выпадающего списка вытянулись в одну строку.