How to have horizontal scrollbar with jQuery UI Layout and jscrollpane

Question

I'm trying to use jscrollpane along with jquery UI layout

What I want is to have custom horizontal scrollbar on the custom scrollbar example here : http layout.jquery-dev.net/demos/custom_scrollbars.html

I have a list with long elements, that I keep on one-line only using the css property : white-space: nowrap However, the horizontal scrollbar doesn't appear, and I can't scroll horizontally.

Here is the code (that I tool directly from jquery UI demo)

    function initPaneScrollbar ( pane, $Pane ) {
    $Pane.find("div.scrolling-content:first")
        // re/init the pseudo-scrollbar
        .jScrollPane({
            scrollbarMargin:    15  // spacing between text and scrollbar
        ,   scrollbarWidth:     15
        ,   arrowSize:          16
        ,   showArrows:         true
        })
        // REMOVE the *fixed width & height* just set on jScrollPaneContainer
        .parent(".jScrollPaneContainer").css({
            width:  '100%'
        ,   height: '100%'
        })
    ;
};

var myLayout    ;

$(document).ready(function () {

    myLayout = $('body').layout({
    //  need to re-init the scrollbar whenever the pane resizes
        center__onresize:           initPaneScrollbar
    ,   west__onresize:             initPaneScrollbar
    ,   east__onresize:             initPaneScrollbar
    //  timing issue, so init scrolling AFTER init done (below)
    ,   triggerEventsOnLoad:        false
    //  live-resizing on all panes - not required
    ,   resizeWhileDragging:        true
    //  avoid re-initing scrollbars repeatedly while: resizeWhileDragging
    //  sizing is much smoother, but scrollbar.height and text-width don't update until 'done'
    ,   triggerEventsWhileDragging: false
    // enable state-managment for pane-size
    ,   useStateCookie:             true
    });

    // NOW init all scrollbars
    initPaneScrollbar( 'west', myLayout.panes.west );
    initPaneScrollbar( 'east', myLayout.panes.east );
    initPaneScrollbar( 'center', myLayout.panes.center );

});

I have set up a quick jsfiddle here : http://jsfiddle.net/un7pU/ (I basically took the custom scrollbar example here : http://layout.jquery-dev.net/demos/custom_scrollbars.html, and just included a ul list with long li elements, on the west pane. On this west pane, no horizontal scrollbar is displayed.

any idea ?

Cheers Nabbo