Opened 14 years ago

Closed 14 years ago

#4717 closed defect (invalid)

Wrong layout of tabs container in a dijit

Reported by: Frederic.Stark at Owned by: Adam Peller
Priority: high Milestone:
Component: Dijit Version: 0.9
Keywords: Cc:
Blocked By: Blocking:



Go to (or use the attached file)
Click on button "Add Content Dijit"
A new tab appear (labelled "Top Tab4")
Click on it


A bright yellow div appear


Two horizontal tabs on a yellow background, and a green content zone reading "Content 1"


1 Resize the window, the two tabs will appear.
2 Go back to "Top Tab1"
3 Re-click on "Add Content Dijit"
4 Go to the new tab
5 Resize the window, the horizontal tabs appear
6 Go back to the previous tab, the horizontal tabs that appeared on step 1 have disapeared.
7 Switching between the two tabs while resizing the window show that when the current tab have its layout redone, the previous one is lost.


Occurs on Firefox 2 Mac OS X
Occurs on Safari Mac OS X (with minor difference: the tab title are always visible)
Occurs on IE6 Windows

Using latest trunk

If tried to add startup() and layout() with no meaningful results.

Will be happy with a workaround that let me programmatically add tabs to an existing tab (it works if done in html with dojoType)

Attachments (1)

bug_010.html (2.8 KB) - added by guest 14 years ago.
Html file to reproduce the issue

Download all attachments as: .zip

Change History (6)

Changed 14 years ago by guest

Attachment: bug_010.html added

Html file to reproduce the issue

comment:1 Changed 14 years ago by Sam Foster

Summary: Tab conWrong layout of tabs container in a dijit

comment:2 Changed 14 years ago by Adam Peller

Owner: set to Adam Peller
Reporter: changed from guest to [email protected]

comment:3 Changed 14 years ago by Adam Peller

Reporter: changed from [email protected] to Frederic.Stark at

comment:4 Changed 14 years ago by guest

I am the original reporter.

Adding a

resize:function() {



to the custom widget fixed the issue. To be properly laid out, the tab needs to have its "layout" function called when the user click on the tab, normally (ie: if defined in HTML inline code) with the following stack frame:

TabContainer::layout _LayoutWidget::resize StackContainer::_transition StackContainer::selectChild StackController::onButtonClick

The custom dijit had no resize function, so the tab container was not re-laid out when the tab was clicked.

comment:5 Changed 14 years ago by bill

Resolution: invalid
Status: newclosed

Right, and this is just the way the system works. Every layout widget needs a startup() and resize() method. You might want to have your custom widget extend _LayoutWidget.

Note: See TracTickets for help on using tickets.