JQuery UI SelectMenu полоса прокрутки не работает

Question

Я использую плагин jquery selectmenu. Я инициализировал выбор с

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

У меня есть много вариантов, и это приводит к появлению полосы прокрутки браузера по умолчанию, но я не могу использовать ее. Если я нажимаю и пытаюсь перетащить эту панель, меню выбора закрывается. Я могу прокрутить колесиком мыши. Там может быть некоторый конфликт в CSS и различных плагинов. Но я не уверен, с чего начать.

Есть идеи, что может быть причиной этой проблемы?

Answer 1

Кажется, проблема в этом разделе файла js:

// 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 );
    }
});

Полоса прокрутки соглашается с условием в предложении "if", поэтому selectmenu закрывается...

Вы можете комментировать строку внутри предложения "if", пока кто-нибудь не решит эту ошибку. Таким образом, меню выбора не будет закрыто при нажатии на него, но оно будет закрыто при выборе любого параметра...

РЕДАКТИРОВАТЬ:

Хорошо, сейчас работает. Измените секцию, показанную ранее этим:

$( 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 );
    }
});

Таким образом, поскольку полоса прокрутки является частью div с классом "ui-selectmenu-menu-dropdown"... selectmenu не будет закрываться при перемещении полосы прокрутки.

Answer 2

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

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

Возможно, вам понадобится еще больше ограничить это изменение стиля в своем CSS, если вы используете другие виджеты jQuery UI, которые включают элемент

с назначенным классом 'ui-menu'.

Answer 3

Решение приведено для примера "выберите номер" демонстрационной страницы JQueryUI:

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

Answer 4

<!--JQUERY-->
$('.custom-combobox-toggle').on('click',function (e) {
      e.preventDefault();
      $('.ui-menu').addClass('custom-scroll');
});

<!--CSS-->
.ui-widget.ui-widget-content.custom-scroll {
    max-height: 300px;
    overflow: auto;
    display: block;
}

Answer 5

Если вы хотите установить максимальную высоту для каждого элемента по идентификатору. Использование:

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

Например, ваш идентификатор selectmenu - это "select" use:

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