Может ли выбранная combobox jQuery иметь разную ширину в зависимости от того, открыта ли она?

Question

Я использую выбранный для того, чтобы сделать забавный combobox. Все работает нормально, но у меня есть вопрос.

Я думаю, что список опций принимает ширину, указанную в визуальной combobox. Все мои варианты очень длинные, и я должен сделать очень большое поле со списком, чтобы избежать выбора вариантов в двух строках.

Возможно ли сделать небольшое поле со списком, например, 150 пикселей, когда оно закрыто, и гораздо больше, когда список открыт?

Answer 1

Да, что возможно. Это можно сделать 2 способами:

1. Непосредственно добавив стиль «ширина» к классу chzn-drop в chosen.css файла.
2. Добавление ширины через jQuery.

Я предпочитаю 2-ым и вот код:

HTML:

<select class="chzn-select" data-placeholder="select your options" style="width: 150px"> 
    <option value="">option1</option> 
    <option value="option1">option2</option> 
    <option value="option2">option3</option> 
</select> 

JQuery:

$('.chzn-select').chosen(); 
$('.chzn-drop').css({"width": "300px"}); 

Результат:

Надеюсь, вы поняли.

Answer 2

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

$('.chosen-drop').css({minWidth: '100%', width: 'auto'}); 

Answer 3

Вы можете установить свойство width с выбранным инициализатором.

$(".chosen-select").chosen({ allow_single_deselect: true, disable_search_threshold: 5, width:"100%" }); 

Answer 4

$('.chosen-select').each(function() { 
    var $this = $(this); 
    $this.next().css({'width': '225px'}); 
}); 

Answer 5

ответ Koenpeter о просто добавить «ширина: авто» не работает для меня. Я нашел, что все это можно сделать в CSS, например:

.chosen-container .chosen-drop { 
    min-width: 100%; 
    width: auto; 
} 

.chosen-container .chosen-drop ul { 
    white-space: nowrap; 
}