How do I dynamically show and hide an entire TabContainer using DOJO?

Question

DOJO seems to have some quirks here. I specifically need to have the TabContainer hidden when the page loads, but then become visible after the user clicks a button. The fir

Answer 1

After you set display:block do this:

dijit.byId('tabContainer').resize();

dijit.layout widgets often don't lay themselves out properly if they are display:none (and sometimes even when visibility:hidden). You have to fiddle around in Firebug till you figure out what works!

Answer 2

Old thread but I experienced this same issue and this is how I solved it. First, you cannot use display:none. Per the folks at DOJO, you have to use visibility:hidden with dijits or this will not work. So, you want this:

<div id="tabContainer" dojoType="dijit.layout.TabContainer" style="width:500px; height:100px;visibility:hidden;">

Then, to show this you do the following:

dojo.style("tabContainer", "visibility", "visible");

Now, the problem this poses is what you already found out. This reserves a invisible div in your viewport that is 500px wide. So if you are using a bordercontainer, there will be this empty 500px gap in your page. To resolve this, I had to create my dijits programatically and inject them into a empty div, rather than do what you did and do it declaratively. Hope this helps someone out there.

Answer 3

Tested sucessfully with Dojo 1.10 . Use registry instead of "dijit.byId()". The method resize() only works on the dijit.layout.BorderContainer.

define([
    "dijit/registry" // registry
], function(registry) {

    var show = true;

    if (show) {
        domStyle.set(registry.byId("dijitLayoutContentPane").domNode, {'display': 'block'});
        registry.byId("dijitLayoutBorderContainer").resize();
    } else {
        domStyle.set(registry.byId("dijitLayoutContentPane").domNode, {'display': 'none'});
        registry.byId("dijitLayoutBorderContainer").resize();
    }

}