jscrollpane track goes past the DIV

[nishant80]

jscrollpane track goes past the DIV border if DIV is under jquery-ui tab.

Please see the code and demo at jfiddle here:
http://jsfiddle.net/nishant80/zRVqB/

As you can see in result, the vertical scroll-bar sticks out towards top and horizontal bar sticks out towards left. This makes it look ugly.

I would like them to be exactly aligned with the table.

If I remove tabs, they won't stick out. So I guess it has something to do with how jscrollpane is behaving under jquery-ui tab.

Thanks!

[vitch]

The problem isn't related to jScrollPane specifically, it's to do with relations between your CSS and jQuery UI's CSS... If you don't initialise jScrollPane you will see that things still look weird. This is because jQuery UI adds padding to .ui-tabs .ui-tabs-panel...

You can debug it using your browser's development tools (e.g. right click on the table in Chrome and select "Inspect element"). One workaround would be to nest the jScrollPane inside the tabbable element like so:
http://jsfiddle.net/sXHY9/

[nishant80]

Kelvin,

Thanks for checking this and suggesting a workaround. I will try what you have suggested.

-Nishant