Perfect-прокрутки не правильно применять в пользовательском интерфейсе JQuery selectmenu

Question

Я пытаюсь добавить perfect-scrollbar плагин (которые дают прекрасный скроллбар вместо скроллинга браузера по умолчанию) в JQuery UI selectmenu

Это JSFIDDLE

Когда я открываю selectmenu, полоса прокрутки не отображается (даже если я навешиваю список), пока не нахожу мышь ближе к нижней части списка (это означает: при первом открытии меню выбора оно дает ощущение что нет других предметов, поскольку полоса прокрутки там отсутствует)

Любая идея, как я могу это решить?

HTML

<select name="number" id="number"> 
     <option>1</option> 
     <option selected="selected">2</option> 
     <option>3</option> 
     <option>4</option> 
     <option>5</option> 
     <option>6</option> 
     <option>7</option> 
     <option>8</option> 
     <option>9</option> 
     <option>10</option> 
     <option>11</option> 
     <option>12</option> 
     <option>13</option> 
     <option>14</option> 
     <option>15</option> 
     <option>16</option> 
     <option>17</option> 
     <option>18</option> 
     <option>19</option> 
</select> 

JS

$(function(){  
    $("#number").selectmenu().selectmenu("menuWidget").addClass("overflow").perfectScrollbar(); 
}); 

CSS

#number{ 
    width: 220px; 
} 
.overflow{ 
    height: 200px; 
    position: relative; 
} 

Answer 1

Ответ на мой вопрос: Как я понял элемент, который мы применяем совершенной скроллбар к нему должен имеют явную высоту (100% или 400 пикселей или что-то еще), и это нормально, я уже добавил переполнение класса, которые добавляют высоту в список

$("#number").selectmenu().selectmenu("menuWidget").addClass("overflow") 

затем я применил функцию perfectScrollbar() к этому списку , но она по-прежнему скрыты, и это проблема

JQuery не в состоянии вычислить высоту элемент, если это скрытый (даже если он имеет высоту CSS набор свойств)

Таким образом, после глядя на JQuery UI selectmenu DOCUME ntation я смог найти open события, которое мы можем использовать, чтобы сделать что-то, когда список открыт

$("#number").selectmenu({ 
    open: function(event, ui) { 
     $("#number").selectmenu("menuWidget").addClass("overflow").perfectScrollbar(); 
    } 
}) 

Что делает код прост, он применит метод perfectScroll() только после того, как список открыт и JQuery является способный читать высоту

Я надеюсь, что это поможет кому-то в той же ситуации.