Opened 10 years ago

Closed 9 years ago

#10826 closed defect (fixed)

TabContainer not rendered correctly inside nested BorderContainers

Reported by: ruzbeh Owned by: bill
Priority: high Milestone: 1.5
Component: Dijit Version: 1.4.0
Keywords: TabContainer BorderContainer Cc:
Blocked By: Blocking:

Description (last modified by bill)

I am having a problem with a TabContainer inside two nested BorderContainers. The tab titles are not being rendered correctly.

The code which is not working is below. In this example, the tab title "Test1", is not being shown completly, it seems that the padding is incorrect and it is being shown as "est1".

<div dojoType="dijit.layout.BorderContainer" id="borderContainer" style="text-align: left; width: 100%; height: 100%;">
    <div dojoType="dijit.layout.BorderContainer" region="center" > 
        <div dojoType="dijit.layout.TabContainer" region="leading" style="width: 22%; height: 100%;" >
            <div dojoType="dijit.layout.ContentPane" title="Test1" selected="true">
            </div>
            <div dojoType="dijit.layout.ContentPane" title="Test2" >
            </div>
        </div>
    </div> 
</div>

I have attached a test case and a picture with the problem.

Thank you.

Attachments (2)

tabContainerProblem.JPG (2.1 KB) - added by ruzbeh 10 years ago.
testCase.html (1.2 KB) - added by ruzbeh 10 years ago.

Download all attachments as: .zip

Change History (6)

Changed 10 years ago by ruzbeh

Attachment: tabContainerProblem.JPG added

Changed 10 years ago by ruzbeh

Attachment: testCase.html added

comment:1 Changed 9 years ago by James Burke

Component: GeneralDijit
Owner: anonymous deleted

comment:2 Changed 9 years ago by bill

Description: modified (diff)
Milestone: tbd1.5

Thanks for your test case. I had to add a style tag

<style>
	body, html { height: 100%;  padding: 0px; }
</style>

but then I was able to reproduce the problem on FF3.6/mac.

In your example, you can easily workaround the problem by doing a dijit.byId("borderContainer").resize() in a dojo.addOnLoad(), perhaps in a setTimeout(). You can also workaround the problem by setting a width in pixels, rather than 22%, in this markup:

<div dojoType="dijit.layout.BorderContainer" id="borderContainer" style="text-align: left; width: 100%; height: 100%;">
	 <div dojoType="dijit.layout.BorderContainer" region="center" > 
		<div dojoType="dijit.layout.TabContainer" region="leading" style="width: 22%; height: 100%;" >

What's happening is that TabContainer startup calls ScrollingTabController.onSelectChild(), which starts a scrolling animation to bring the selected tab into view. At that point though, resize() hasn't been called and the TabContainer is 0x0 size, causing calculation issues. Briefly after, ScrollingTabController.resize() is called, which sets the scroll to the right position, but it forgets to cancel the animation, and then the animation continues and overwrites the scroll position set in resize().

I'll check in a fix to cancel the animation, and also to avoid the unnecessary/unwanted animation on TabContainer startup.

comment:3 Changed 9 years ago by bill

Owner: set to bill
Status: newassigned

comment:4 Changed 9 years ago by bill

Resolution: fixed
Status: assignedclosed

(In [22410]) Avoid unnecessary and unwanted scroll animation on TabContainer startup. Also be sure to cancel scroll animation if one is running during a resize() call. Fixes #10826.

Note: See TracTickets for help on using tickets.