How to use Javascript Infovis Toolkit inside of hidden container (tabbed layout)

Question

I have a page with multiple tabs(jquery ui tabs)

On the last tab I am displaying a "spacetree". I have this working properly on a seperate test page(without the tabs). As soon as I add everything to the tabbed page the tree stops displaying.

The div with the infovis id is inside of the proper "tab" div and is defined as such:

<div id="tab2">                                                              
    <div id="infovis" style="position:relative; height:380px; width:350px; border:solid 1px #333;">

    </div>
</div>

in firebug I can see that the infovis div is getting the height and width set properly, but the "infovis-canvaswidget" that gets placed inside gets height and width of 0, which I assume is part of the problem.

How can I solve this issue and use the toolkit inside of a tabbed container?

Answer 1

Oh ok, I fixed it after poking around for a while. It was not the tab container that was messing things up. The entire div that contains the tabs is hidden on page load, before the JIT was initialized in my document.ready function.

I needed to set up the spacetree before the outer div was hidden to make sure the infvis inner divs picked up the proper styling