TabContainer inside ContentPane inside StackContainer with doLayout:false on TabContainer and StackContainer but not ContentPane not displaying correctly

[lzboron]

I tried to insert TabContainer into StackContainer. If TabContainer is inserted first, before any other ContentPane, it does not display properly, navigation buttons are displayed above tabs and content of selected tab is not displayed. See attached file.

After switching tabs, their content is displayed. After switching to another ContentPane of StackContainer and back, tabs are displayed correctly.

Here is a sample of code causing problem:

        <span data-dojo-type="dijit.layout.StackController" data-dojo-props="containerId:'stackContainer2'">
        </span>
        <div data-dojo-type="dijit.layout.StackContainer" id="stackContainer2" data-dojo-id="stackContainer2"
            data-dojo-props="doLayout:false"  >
             <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'Tab Content pane 1 '">
                <div id="Div2" data-dojo-type="dijit.layout.TabContainer" data-dojo-props="doLayout:false, title:'Tab container'" controllerWidget="dijit.layout.TabController">
                    <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'Personal'" refreshOnShow="true"  cacheContent="false">
                       Here is what you should have seen.
                    </div>
                    <div id="Div5" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'Factrs'">
                        cccc
                    </div>
                </div>
                </div>
            
            <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'Content pane 2 '">
                Please answer following questions
            </div>
            <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'Content pane 3'">
                Here is what you should have answered :P
            </div>
        </div>

This problem can be fixed by calling resize of StackContainer and its children on startup. I used this workaround and it works:

dojo.extend(dijit.layout.StackContainer, {
    _startupOrigin: dijit.layout.StackContainer.prototype.startup,
    startup: function () {
        dojo.hitch(this, this._startupOrigin).call();
        if (typeof this.selectedChildWidget.resize === 'function')
            this.selectedChildWidget.resize();
    }
});

[lzboron]

incorrectly displayed TabContainer?

[bill]

Thanks, I'll take a look. It seems like you have an unnecessary ContentPane surrounding your TabContainer though.

[bill]

version of test file using dojoType etc. rather than new parser syntax, for testing against older versions of dojo

[bill]

test case

[bill]

adding doLayout:false to ContentPane wrapping TabContainer fixes the problem

[bill]

I see the issue you are talking about in 1.6. It works a bit better in 1.7 but still the TabContainer is crushed, leaving no room for the content.

The StackContainer correctly calls ContentPane.resize(), without any argument to the resize() method. But the issue is that ContentPane (specifically ContentPaneResizeMixin._layout) tries to measure it's own size and then calls TabContainer.resize({h: 36}).

As I mentioned above the best solution is to remove that useless wrapper ContentPane, making the TabContainer a direct child of StackContainer.

If for some reason you did need to have a wrapper ContentPane, then you need to put doLayout:false on that ContentPane.

Unfortunately I don't know a better solution. It's hard to tell what ContentPane.resize() should do because it's hard to tell if the ContentPane has a size specified via CSS (either style="..." or indirectly via CSS rules) or not.

[bill]

Closing as wontfix for now. App needs to set doLayout:false on the wrapper ContentPane (or better yet, get rid of the wrapper).