How do I dynamically show and hide an entire TabCo

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 first thing I tried is setting style.display = "none" to start, and then setting style.display = "block" on the click event. Unfortunately, this only partially works- the page will render an invisible box in the right location/dimensions, but not render the actual contents. The box's contents only get rendered when triggered by something else (for example, going to a different FF tab or suspending/resuming firebug will make the box render).

If the style.display property is set to be visible on page load, everything works fine. You can toggle the display property and it shows or hides the tabcontainer properly. But if it's set to "none" on page load, it screws up.

I tried a workaround of setting the style.display property to "" in the HTML but then immediately setting it to "none" in the Javascript, but it still fails- the change occurs too soon and it needs to happen after the tabcontainer renders (which can take a second or two).

Some stripped sample code:

HTML:
<div id="tabContainer" dojoType="dijit.layout.TabContainer" style="width:500px; height:100px;display:none;">
</div>

and then the Javascript to show the tab on a user click:

function initTabs()  
{  
var tabContainer = dojo.byId('tabContainer');  
tabContainer.style.display = 'block';  
}  

How can I dynamically show/hide a TabContainer without having it start in the shown state?

Answer 1

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 2

you should do

dijit.byId("tabContainer").domNode.style.display = 'block'

or perhaps

dijit.byId("tabContainer").domNode.style.visibility = 'hidden';

is even better

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();
    }

}

Answer 4

The first thing (setting style.display = "none") is right. In place of

...then setting style.display = "block"

you should just call .set_visible JS method of the ajax TabContainer when "...user clicks a button", like:

$find('<%= Tabs.ClientID %>').set_visible(true);

Answer 5

I used this after setting the style display:block and it works great! This way you don't need to know the ID of the container to resize.

this.getParent().resize();

Answer 6

If you use dijit.byId("tabContainer").resize(); after you set the display to block it will bring back the tab headers.

You'll save a little bit of javascript if you just use visibility: hidden; (although the tabContainer will still take up space on the page)

Another alternative I use pretty frequently is instead of display: none/block; I use height: 0px/auto;

You could also switch the position to absolute and set the coordinates for off screen somewhere too. That's require a lot more css changes than simply doing the height though. That's my preferred method if it works in my situation.

Between these solutions hopefully one will work for you.