Как установить максимальную высоту и разрешить прокрутку с помощью jQueryUI Selectmenu

Question

Я пытаюсь использовать новый виджет jQueryUI selectmenu, чтобы получить индивидуальный стиль для моего выпадающего списка <select> и сохранить полную функциональность. Но для больших списков он практически бесполезен. В состоянии по умолчанию при открытии выпадающие элементы просто продолжают работать со страницы, и прокрутка не включена. Я нахожу это странным для плагина, который может заменить стандартное HTML <select> выпадающее меню.

Есть ли способ исправить это, например, установить максимальную высоту в раскрывающихся элементах, которые показаны и включить прокрутку? Возможно, я пропустил вариант API. Я полагаю, что это можно сделать с помощью некоторого творческого CSS?

Here is a JS Fiddle, показывающий, что происходит.

Answer 1

Уверен, что это так, и, к счастью, это невероятно просто! :)

Вам просто нужно определить максимальную высоту-за <ul>:

#countries-menu { 
    max-height: 100px; 
} 

Обратите внимание, что max-height вместо этого может быть применен к .ui-selectmenu-menu .ui-menu, если вы хотите, чтобы настроить любое меню выбора в JQuery UI.

Обновлено скрипки: https://jsfiddle.net/mjfnao1L/1/

Надеется, что это помогает :)

Answer 2

Если вы хотите, чтобы установить высоту в проценты от видимой высоты, вы можете использовать этот код, приведенный ниже. Это позволит установить его на 90% видимой высоты, которая позволит пользователям видеть с большими экранами больше возможностей:

#countries-menu { 
    max-height: 90vh; 
} 

https://jsfiddle.net/yoate65g/