jquery ui selectmenu scrollbar non funziona

Question

Uso il plug-in selectmenu jquery. Ho inizializzato select con

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

Ho molte opzioni e questo fa apparire la barra di scorrimento del browser predefinita, ma non posso usarlo. Se faccio clic e tento di trascinare questa barra, il menu di selezione si chiude. Posso scorrere con la rotella del mouse. Ci potrebbe essere qualche conflitto in css e vari plugin. Ma non sono sicuro da dove cominciare a cercare.

Qualche idea, che cosa potrebbe causare questo problema?

Answer 1

sembra essere un problema in questa sezione del file 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); 
    } 
}); 

La barra di scorrimento accetta la condizione di "se" clausola, così Selezionare Menu è chiuso ...

Puoi commentare la linea all'interno della clausola "if" finché qualcuno non fornisce una soluzione per questo bug. In questo modo, il Selezionare Menu non verrà chiuso quando si fa clic fuori di esso, ma sarà chiuso quando si seleziona un'opzione ...

EDIT:

Ok, è ora di lavoro. Modificare la sezione mostrata prima da questo:

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

In questo modo, come la barra di scorrimento è parte del div con classe "ui-Selezionare Menu-menu-discesa" ... Selezionare Menu non verrà chiusa quando si sposta la barra di scorrimento.

Answer 2

È possibile impostare l'altezza massima per il contenuto del menu di scelta quando viene aperto in CSS e quindi verrà visualizzata una barra di scorrimento all'interno dell'elenco di elementi che è possibile utilizzare.

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

Potrebbe essere necessario limitare ulteriormente questo stile-cambiamento nel CSS se si utilizzano altri widget jQuery UI che includono un <ul> elemento con il 'ui-menù' classe assegnata.

Answer 3

se si desidera impostare l'altezza massima per ogni articolo per ID. Usa:

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

Per esempio, l'identificativo del tuo Selezionare Menu è 'selezionare' uso:

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

Answer 4

Una soluzione è data per l'esempio "selezionare un numero" del JQueryUI demo page:

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