Opened 12 years ago

Closed 12 years ago

#4717 closed defect (invalid)

Wrong layout of tabs container in a dijit

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

Description

HOW TO REPRODUCE:

Go to http://82.230.65.68:31416/~fred/dojo/fred_samples/bug_010.html (or use the attached file)
Click on button "Add Content Dijit"
A new tab appear (labelled "Top Tab4")
Click on it

RESULT:

A bright yellow div appear

EXPECTED RESULT:

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

ADDITIONAL INFO:

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.

COMMENTS:

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 12 years ago.
Html file to reproduce the issue

Download all attachments as: .zip

Change History (6)

Changed 12 years ago by guest

Attachment: bug_010.html added

Html file to reproduce the issue

comment:1 Changed 12 years ago by Sam Foster

Summary: Tab conWrong layout of tabs container in a dijit

comment:2 Changed 12 years ago by Adam Peller

Owner: set to Adam Peller
Reporter: changed from guest to Frederic.Stark@…

comment:3 Changed 12 years ago by Adam Peller

Reporter: changed from Frederic.Stark@… to Frederic.Stark at gmail.com

comment:4 Changed 12 years ago by guest

I am the original reporter.

Adding a

resize:function() {

this._tabContainer.resize();

}

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 12 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.