jquery ui selectmenu scrollbar not working

Question

I use jquery selectmenu plugin. I have initialized select with

$('select').selectmenu({width:100, maxHeight:300, style: 'dropdown'});

I have many options and this causes to appear default browser scrollbar, but i cant use it. If I click and try to drag this bar, selectmenu closes. I can scroll with mouse wheel. There might be some conflict in css and various plugins. But im not sure where to start looking.

Any ideas, what might be causing this problem?

Answer 1

It seems to be a problem in this section of the js file:

// document click closes menu
$( document ).bind( "mousedown.selectmenu-" + this.ids[ 0 ], function( event ) {
    //check if open and if the clicket targes parent is the same
    if ( self.isOpen && !$( event.target ).closest( "#" + self.ids[ 1 ] ).length ) {
        self.close( event );
    }
});

The scrollbar agrees the condition in "if" clause, so selectmenu is closed...

You can comment the line inside "if" clause until someone gives a solution for this bug. This way, the selectmenu won't be closed when you click out of it, but it will be closed when you select any option...

EDIT:

Ok, it's working now. Change the section shown before by this one:

$( document ).bind( "mousedown.selectmenu-" + this.ids[ 0 ], function( event ) {
    //check if open and if the clicket targes parent is the same
    if ( self.isOpen && !$( event.target ).closest( "#" + self.ids[ 1 ] ).length && !$(event.target).hasClass('ui-selectmenu-menu-dropdown')) {
        self.close( event );
    }
});

This way, as the scrollbar is part of the div with class "ui-selectmenu-menu-dropdown"... selectmenu won't be closed when moving the scrollbar.

Answer 2

You can set the max-height for the content of the selectmenu when it is opened in CSS and then it will present a scrollbar within the list of items that can be used.

ul.ui-menu { max-height: 420px !important; }

You might need to further restrict this style-change in your CSS if you are using other jQuery UI widgets that include a <ul> element with the class 'ui-menu' assigned.

Answer 3

A solution is given for the example "select a number" of the JQueryUI demo page:

$('select').selectmenu().selectmenu("menuWidget").css("height","200px");

Answer 4

if you want to set max height for each item by ID. Use:

#select1-menu { max-height: 150px !important; }
#select2-menu { max-height: 200px !important; }

For example, your selectmenu's id is 'select' use:

#select-menu { max-height: 150px !important; }