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

There is solution for this. If you want to show TabContainer calll:

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

and use 'none' if you want to hide TabContainer.

This works for me, but that is truth, it is not obvious :)

Answer 2

Well, I did not solve this problem, but I came up with a workaround...Creating the TabContainer on the click event, instead of creating it hidden on page load and then showing it on the click event.

HTML:

<div id="tabContainer">     
</div>

JS:

var tabContainer = new dijit.layout.TabContainer({id:"tabContainer", style:"width:500px;height:200px;"}, dojo.byId('tabContainer'));  
//add tabs
tabContainer.startup();

Answer 3

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 4

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 5

you should do

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

or perhaps

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

is even better

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.