I'm trying to use the new jQueryUI selectmenu widget to get custom styling for my <select> dropdown and retain full functionality. But it appears to be practically useless for large lists. In its default state when opened, the dropdown items just keep running off the page and there is no scrolling enabled. I find this to be bizarre for a plugin which can supposedly replace the standard HTML <select> dropdown menu.
Is there a way to fix this e.g. set a max height on the dropdown items that are shown and enable scrolling? Maybe I missed an API option. I suppose it could be done with some creative CSS?
Here is a JS Fiddle showing what happens.
There sure is a way of doing that, and fortunately, it's incredibly simple! :)
You simply need to define a max-height for the <ul>:
#countries-menu {
max-height: 100px;
}
Note that the max-height could instead be applied to .ui-selectmenu-menu .ui-menu if you'd like to adjust any select menu in jQuery UI.
Updated fiddle: https://jsfiddle.net/mjfnao1L/1/
Hope this helps :)