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

Я использую Select2 3.3.2

У меня очень длинные параметры в select. Пример:

<select id="e1">
<option value="AL">Alabama</option>
<option value="WY">Wyoming</option>
<option value="WY">very long long long text</option>
<option value="WY">very long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long text</option>
</select>

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

Я хотел бы установить длинную ширину для раскрывающегося списка, когда он открывается (например, - 800px или даже автоматическая оцененная ширина).

но сохранить вход с короткой шириной, когда раскрывающийся список закрыт (например, 300px).

Я следил за этим "добавить опцию для установки ширины раскрывающегося списка" выпуск select2.

но я не мог заставить его работать, ширина раскрывающегося списка options / совпадает с шириной ввода и параметрами, завернутыми в несколько строк.

вот демонстрация моей проблемы в jsfiddle -http://jsfiddle.net/ewwAX/

спасибо всем заранее за помощь.

40
css jquery jquery-select2 select

6 ответов

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

вот демо в jsFiddle.

JavaScript:

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

в CSS:

.bigdrop {
    width: 600px !important;
}
56

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

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

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

66

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

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

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

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

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

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

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

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

#select2-drop{
    width: 400px !important;
}
1
$("#e1").select2({ width: '100%' });

попробуй такое

0