Can't get jScrollPane plus SelectBox plugins to work together

Question

Ok, I have two plugins I am using, one that helps make fancy select box dropdowns - works fine. Plugin: jQuery Selectbox plugin

Then I have one so I can make a custom scroll on elements, that works fine too. Plugin: jScrollPane

However I cannot get them working together - a dropdown menu with a custom scroll.

You can see here working examples: http://jsfiddle.net/8VX4d/23/

The first box is a box without scroll (correct), the second is a working box with a scroll correctly working and the one below is a dropdown that I am trying to get the custom scroll working on but can't.

Not sure if it has anything to do with the selectbox instance having to be ready before I apply the custom scroll and I'm not sure how I can check if it is?

As you can see on jsFiddle I am using onDomReady and binding them via:

//$(".pretty_sb").selectbox();
$('.cat_list').jScrollPane();
$(".pretty_sb").selectbox();
$('.sbOptions').jScrollPane();
//$('.sbHolder').jScrollPane();

Edit:

This seems to work but for some reason it restricts the height it shows for the dropdown:

$(".pretty_sb").selectbox({
    onOpen: function (inst) {
        $('.sbOptions').jScrollPane({
            verticalDragMinHeight: 40
        });
    }
});
//$('.sbOptions').jScrollPane();
$('.cat_list').jScrollPane();

Edit #2: I have a min-height set for the sbOptions class and that is the height that jScrollPane seems to be taking for some reason!?

Answer 1

Solution 0 - Reinitialize and Destroy

Working Fiddle: http://jsfiddle.net/8VX4d/39/

$('.pretty_sb').selectbox({
    onOpen: function (inst) {
        var api = $('.sbOptions').data('jsp');
        api.reinitialise({
            autoReinitialise: true,
            autoReinitialiseDelay: 10,
        });
    },
    onClose: function (inst) {
        var api = $('.sbOptions').data('jsp');
        api.destroy();
        $('.sbOptions').jScrollPane();
    }
});
$('.sbOptions').jScrollPane();

Tested on:

• Chrome v 31.0.1650.63 m
• FireFox 26.0
• IE10

Solution 1 - Reinitialize on a Delay

Working Fiddle: http://jsfiddle.net/8VX4d/36/

The following will force a reinitialization of the scroll pane which corrects the height. However, this requires a lot of overhead. The end goal would be to manually reinitialize as described in jScrollPane - dynamic content demo page.

$('.pretty_sb').selectbox({
    onOpen: function (inst) {
        $('.sbOptions').jScrollPane({
            autoReinitialise: true,
            autoReinitialiseDelay: 10,
        });
    }
});

Solution 2 - Explicitly Set Height

Working Fiddle: http://jsfiddle.net/8VX4d/29/

The following appears to produce the desired result. I got the idea of forcing the height before applying the jScrollPane from this blog post.

$(".pretty_sb").selectbox({
    onOpen: function (inst) {
        $('.sbOptions').height(300).jScrollPane();
    }
});