Select2 - Установка различной ширины для ввода и выпадающего меню

Ответ 1

Используемое вами свойство не предназначено для управления шириной раскрывающегося списка. Вы можете использовать свойство dropdownCssClass.

Вот демо в jsFiddle.

JavaScript:

$(document).ready(function() { 
    $("#e1").select2({dropdownCssClass : 'bigdrop'}); 
});

CSS:

.bigdrop {
    width: 600px !important;
}

Обратите внимание, что для более свежих версий теперь есть лучшее решение! Смотрите ответ Дэйва Амфлетта

Ответ 2

Select2 включает параметр dropdownAutoWidth, который использует javascript, чтобы попытаться быть достаточно широким для раскрывающегося содержимого.

$('#whatever').select2({dropdownAutoWidth : true});

Это, по крайней мере, работает с Select2 3.4.3 - я не знаю, насколько раньше он был введен.

Ответ 3

$("#e1").select2({ width: '100%' });      

Попробуй это. Это установит ширину контейнера на 100%

Ответ 4

Даже лучшее решение. Использование:

$('#e1').select2({width: 'resolve'});

Ответ 5

Здесь, как сделать select2 шире только тогда, когда он открыт:

Если вы хотите, чтобы он расширялся вправо, добавьте этот css:

  .select2-container.select2-dropdown-open {
    width: 170%;
  }

если вы хотите, чтобы он разворачивался влево, добавьте это {

  .select2-container.select2-dropdown-open {
    width: 170%;
    margin-left: -70%;
  }

Ответ 6

Я использовал это, и он работал отлично, только что он повлияет на все select2

#select2-drop{
    width: 400px !important;
}