jQuery integration - auto scrolling TabSheet tabs issue

For my diagramming app, I need to have 2 absolute layouts(2000x2000) contained in a tabsheet container and whenever either of them are switched, I need the scrollbars to be scrolled automatically to 50% of the contained spaces. Another requirement is that, the tabsheet should take all available space. If I understand correctly, in order to have scrollbars for panels, you need to set height and width other than full size. So I have added those 2 layouts directly to the tab and scrollbars appear. By using custom servlet I have added jQuery script and a plugin named scrollTo that can manipulate scrollbars of overflowed divs.

I have added javascript code to selectedTabChange listener and scrollbars are moved quite nicely when tabs are switched. Although, there is a small problem. After the application restart, selected tab’s scrollbars are moved but for other tabs this doesn’t happen on the first try. I think it’s best explained with a proper usecase:

  1. Restart application.
  2. Default selected tab’s scrollbars are moved as expected.
  3. Switch to 2nd tab → scrollbars remain stationary. (!)
  4. Switch to 3rd tab → scrollbars remain stationary. (!)
  5. Switch to 2nd tab and then any other tab → scrollbars move for every tab switch as expected.

Being new to Vaadin and JavaScript, I think this is the best place to ask for the help. What could be the reason? Any workaround/fix would be great.

P.S.: I am attaching a project for convenience. The project title is hard-coded into script include locations, so probably it should be kept unchanged.


The three child divs (having no id or classname and with overflow: auto who support scrolling) created for all 3 corresponding tabs under ‘.v-tabsheet-tabsheetpanel’ have default CSS settings as:

element.style {
    left: -100000px;
    overflow-x: auto;
    overflow-y: auto;
    position: absolute;
    top: -100000px;
    visibility: hidden;

Whenever previously unswitched tab is switched to, the tab layout calculations are performed and above CSS is modified with important properties viz. height, left, top and width required for scrolling to work(?).

element.style {
    height: 532px;
    left: 0;
    overflow-x: auto;
    overflow-y: auto;
    position: absolute;
    top: 0;
    width: 1242px;

I guess SelectedTabChange event is fired before these calculations are done and that is why the javascript snippet for scrollbars is not working because div container height and width are not set up at the moment. Auto scrolling works on second and subsequent tab switchs because CSS/DOM was correctly set up at the first tab switch. Also, in above usecase at step 2, if I execute the javascript using firebug console, scrollbars move as expected. So I assume, firing of tab switch event is the real culprit here.

How can I wait until those hidden tab CSS settings are performed and then execute my javascript code?
11628.war (4.52 MB)

I added a timeout for the previous javascript code in selectedTabChange method and auto scrolling works now.

getMainWindow().executeJavaScript("setTimeout(\"jQuery('.v-tabsheet-content-mytab .v-tabsheet-tabsheetpanel > div:eq(0)').scrollTo('50%', 1000)\", 1000)");

Hoping that somebody might find this useful, I will leave project war as it is.