jscrollpane - scroll horizontally

Question

I'm using jquery jscrollpane plugin http://jscrollpane.kelvinluck.com/ in my web application. I want to use it to scroll only in horizontal position.

Like shown here http://jscrollpane.kelvinluck.com/basic.html

Here is my html:

<div class="addbox horizontal-only scrollpane">
<h4><span class="addbox-text">Pick your best work from <b class="highlight-text">Flickr</b> to display in your portfolio</span></h4>
<div class="addmenu-item"><span class="addmenu-image"><img class="addmenuimage" src="http://farm8.staticflickr.com/7122/7424355198_72620895bd_m.jpg"></span><span class="addmenu-info">Orchid Profiles</span></div>
<div class="addmenu-item"><span class="addmenu-image"><img class="addmenuimage" src="http://farm8.staticflickr.com/7122/7424355198_72620895bd_m.jpg"></span><span class="addmenu-info">Orchid Profiles</span></div>
</div>

CSS:

.scroll-pane
{
height: auto;
max-height: 400px;
overflow: auto;
}
.horizontal-only
{
height: auto;
max-height: 200px;
}

JQuery:

$(".addbox").jScrollPane();

But it is not working ( the height is messing up and jscrollpane is in the vertical position ). Here is the css for the rest of the code https://gist.github.com/2984404

Thanks!

UPDATE

Please check this jsfiddle http://jsfiddle.net/cWcWb/

Answer 1

It is because the width of your .addbox is enough to show all the content without scroll ( 700px ).

Try changing it to 400px for example and you will see the horizontal scroll will appear