rochal/jQuery-slimScroll — Issue #6: slimScroll with jQueryUI tabs gives strange results when applied on multiple tabs
Author: deGir
Created: 2011-11-30 12:46:25+00:00
State: open

First of all it is a really cool and handy plugin, we really like it :)

I get some strange visual effects when slimScroll gets applied on multiple tabs. I use the jQueryUI tabs to sort data, so currently I have 4 of them. The HTML-structure is the common one for ui-tabs:

[div id="tabs"]
[ul]
[li][a href="#tabs-1"]Bla I[/a][li]
[li][a href="#tabs-2"]Bla II[/a][li]
[li][a href="#tabs-3"]Bla III[/a][li]
[li][a href="#tabs-4"]Bla IV[/a][li]
[/ul]
[div id="tabs-1"]contents[/div]
[div id="tabs-2"]contents[/div]
[div id="tabs-3"]contents[/div]
[div id="tabs-4"]contents[/div]
[/div]

When the DOM has been loaded, the tabs are fired via $('div#tabs').tabs(); and after that Im applying slimScroll() for each [div id="tabs-WHATEVER]. I even tried it via the "show event" for the specific tab-panel that was clicked on.

However, it works only for tab 1. The next ones are getting moved down according to their index. It looks like that spaces (invisible slimScrollDivs actually) are getting shown before the contents of the current tab. So for tab 2 the space seems to fit the dimension of tab 1. For tab 3 it appears to be twice the height of tab 1 ...and so on.

Question is, whether someone already tried to apply more than one slimScroll per page or better directly in jQueryUI-tabs. For only one slimScroll in a tab-panel, everything works shiny. As soon as it becomes more than one, something breaks the positioning of other slimScroll-panels.

Any help or hint is appreciated.

Cheerio.