Opened 8 years ago

Closed 8 years ago

#14112 closed defect (wontfix)

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

Reported by: lzboron Owned by:
Priority: high Milestone: tbd
Component: Dijit Version: 1.6.1
Keywords: TabContainer, StackContainer, nesting containers Cc:
Blocked By: Blocking:

Description (last modified by bill)

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

Attachments (4)

screen.png (7.7 KB) - added by lzboron 8 years ago.
incorrectly displayed TabContainer?
14112_legacy.html (1.5 KB) - added by bill 8 years ago.
version of test file using dojoType etc. rather than new parser syntax, for testing against older versions of dojo
14112.html (1.9 KB) - added by bill 8 years ago.
test case
14112_working.html (1.9 KB) - added by bill 8 years ago.
adding doLayout:false to ContentPane wrapping TabContainer fixes the problem

Download all attachments as: .zip

Change History (7)

Changed 8 years ago by lzboron

Attachment: screen.png added

incorrectly displayed TabContainer?

comment:1 Changed 8 years ago by bill

Description: modified (diff)

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

Changed 8 years ago by bill

Attachment: 14112_legacy.html added

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

Changed 8 years ago by bill

Attachment: 14112.html added

test case

Changed 8 years ago by bill

Attachment: 14112_working.html added

adding doLayout:false to ContentPane wrapping TabContainer fixes the problem

comment:2 Changed 8 years ago by 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.

Last edited 8 years ago by bill (previous) (diff)

comment:3 Changed 8 years ago by bill

Resolution: wontfix
Status: newclosed
Summary: TabContainer inside StackContainer not displaying correctlyTabContainer inside ContentPane inside StackContainer with doLayout:false on TabContainer and StackContainer but not ContentPane not displaying correctly

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

Note: See TracTickets for help on using tickets.