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

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

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

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

Ответы

Ответ 1

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

  • Непосредственно добавьте стиль "width" к классу chzn-drop в файл selected.css.
  • Добавление ширины через jQuery.

Я предпочитаю второй, и вот код:

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"});

Результат:

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

Ответ 2

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

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

Ответ 3

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

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

Ответ 4

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

Ответ 5

Ответ Koenpeter на добавление "width: auto" не работал у меня. Я нашел, что все это можно сделать в CSS со следующим:

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

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

Ответ 6

У слишком широких рядов есть некоторые проблемы с маленькими экранами, я добавил этот собственный CSS на свою веб-страницу, который сделает выбранные строки параметров шире, только если экран достаточно большой:

@media screen and (min-width: 720px) {
  .chosen-container .chosen-drop {
     border-top: 1px solid #aaa !important;
     width: auto !important;
     white-space: nowrap !important;
     min-width: 100%;
   }
}