Установленная высота select2

Question

Как увеличить размер высота выпадающего списка select2?

Я попробовал идею, предложенную в https://github.com/select2/select2/issues/144:

.select2-results { 
    max-height: 500px; 
} 

Однако, это не работает. Если я вместо этого устанавливаю свойство min-height, размер увеличивается, однако я не хочу иметь раскрывающийся список размером 500 пикселей, если есть только 1 или 2 элемента ... так что min-height на самом деле не вариант.

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

Answer 1

Попробуйте использовать:

.select2-results__options { 
    max-height: 500px; 
} 

Если это не работает, попробуйте добавить !important так перезаписать это по умолчанию максимальная высота (попробуйте оба метода, ваш и мой).

Answer 2

Я думаю, вам нужно установить как .select2-drop и .select2-results классы следующим образом:

.select2-drop { 
    max-height: /* Your value here */; 
    overflow: scroll; 
} 

.select2-results { 
    max-height: 100%; 
} 

Это гарантирует, что результаты не ограничены по высоте, и что выпадающий все еще годны к употреблению. Если вы протестируете его, вы увидите, что он работает для переменной длины списка независимо от того, как вы устанавливаете максимальную высоту на .select2-drop. Более короткие списки должны соответствовать контенту, а длинные списки должны прокручиваться в пределах этого предела.