dijit.layout.TabContainer

Question

Having problems getting a dijit.layout.tabContainer to display.

I add it programmatically, add a contentPane and all appears well in the DOM.

No JS errors or warnings and I can see the controls are created through Chrome developer tools, I just cannot see them.

The tabContainer is given a height and width.

The tundra theme is being used and the CSS file for tundra is included.

1     dojo . create( "div", { id : "clientData" }, "ctrlPanel" );
2 
3     /*
4      * Create the tab control
5      */
6     var tc = new dijit.layout.TabContainer( { style : 'width:100%, height:100%' }, 'clientData' );
7 
8     /*
9      * Add a content pane
10      */
11     var cp1 = new dijit.layout.ContentPane( {
12           title   : "Basic",
13           content : 'replace me'
14     } );
15 
16     tc.addChild(cp1);
17     tc.startup();

Any ideas?

Answer 1

I believe the problem is simply that you're separating the style directives for TabContainer with a comma, not a semicolon. That is, try changing that line to:

var tc = new dijit.layout.TabContainer({style: 'width:100%; height:100%' }, 'clientData');

Since you are setting it to 100% width and height of the parent container, you also need to make sure the ctrlPanel div has a size (if you haven't already).