Perfect-scrollbar doesn't apply correctly to a jQuery ui selectmenu

Question

I am trying to add perfect-scrollbar plugin (which give a beautiful scrollbar instead of the browser default scrollbar) to a jQuery UI selectmenu

This is the JSFIDDLE

When I open the selectmenu the scrollbar doesn't show up (even if I hover the list) until I get the mouse near to the bottom of the list (which means : the first time you open the selectmenu it gives a feeling that there are no other items because the scrollbar isn't there)

Any Idea how I can solve that ?

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

score 0 · Answer 1 · answered Jul 10 '15 at 13:26

The answer to my question is : As I understood the element which we apply perfect-scrollbar to it should have an explicit height (100% or 400px or whatever) and that's ok I already added a class overflow which add the height to the list

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

then I applied the perfectScrollbar() function to that list but it's still hidden and that is the problem

jQuery is not able to calculate the height of an element if it's hidden (even if it has a height css property set)

So after looking at jQuery ui selectmenu documentation I was able to find an open event which we can use to do something when the list is opened

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

What the code does is simple, it apply the perfectScroll() method only after the list is opened and jQuery is able to read the height

I hope this help someone in the same situation.

Perfect-scrollbar doesn't apply correctly to a jQuery ui selectmenu

1 Answers1