jscrollpane - scroll horizontally


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/


Answers:


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