Настройка мультиселектора Выбранная высота коробки

Я использую Chosen с выпадающим списком multi-select и хотел бы установить высоту выбранного поля в заданный размер.

У меня есть выбранное поле в диалоговом окне с переполнением: скрыто, и выбранное поле расположено абсолютно вне контейнера (так, чтобы выбранное выпадающее меню вышло из диалогового окна правильно.) К сожалению, "position: absolute;" удаляет его из потока и не приводит к увеличению высоты... при этом сокращается диалоговое окно, и появляется многоэкранный выбор. Я могу установить родительский контейнер на фиксированную высоту, но multi-select расширяется по мере выбора большего количества параметров, и я все равно буду сталкиваться с той же проблемой в длинных списках.

Есть ли способ установить выбранный мультивыбор на определенную высоту? Спасибо!

Ответы

Ответ 1

Nevermind... понял это самостоятельно, используя CSS:

.mycontainer {
    height: 120px;
}

.mycontainer .chzn-container-multi .chzn-choices {
    height: 120px !important;
    overflow-y: auto;
}

.mycontainer - это div, который содержит выбранное выпадающее меню.

Пожалуйста, прекратите редактирование ответа. Этот ответ совпадает с версией Chosen, которая была доступна 2 года назад, когда я изначально задал вопрос. Для тех людей, которые используют более новые версии (например, 1.4.2), вы можете попробовать изменить префикс "chzn" в приведенном выше CSS на "выбранный"... но никаких гарантий это не будет (я не смотрел их новые укладка.)

Ответ 2

.chzn-container .chzn-results { max-height: 150px; }

Ответ 3

Вот что помогло:

.mycontainer .chosen-choices {
  max-height: 150px;
  overflow-y: auto;
}

В основном вы хотите ограничить высоту ul, которая содержит параметры.

Ответ 4

Мне удалось решить высоту списка в классе css ниже:

.chzn-container .chzn-results {
height: 150px;}

и я получил прокрутку для оставшегося списка.

Ответ 5

Все остальные ответы работают, но я считаю, что это самое элегантное решение: установите максимальную высоту для .chzn-results (например, 150px). Все соответствующие другие блоки будут следовать. Таким образом, выпадающее меню не будет слишком большим и будет иметь только несколько результатов.

.chzn-results {
   max-height: 150px;
}

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

.chzn-results {
   height: 150px;
}

(Добавить !important в строку, если вам нужно переопределить поведение chosen.css)