Opened 11 years ago
Closed 11 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 )
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)
Change History (6)
Changed 11 years ago by
Attachment: | tabContainerProblem.JPG added |
---|
Changed 11 years ago by
Attachment: | testCase.html added |
---|
comment:1 Changed 11 years ago by
Component: | General → Dijit |
---|---|
Owner: | anonymous deleted |
comment:2 Changed 11 years ago by
Description: | modified (diff) |
---|---|
Milestone: | tbd → 1.5 |
comment:3 Changed 11 years ago by
Owner: | set to bill |
---|---|
Status: | new → assigned |
comment:4 Changed 11 years ago by
Resolution: | → fixed |
---|---|
Status: | assigned → closed |
Note: See
TracTickets for help on using
tickets.
Thanks for your test case. I had to add a style tag
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 adojo.addOnLoad()
, perhaps in asetTimeout()
. You can also workaround the problem by setting a width in pixels, rather than 22%, in this markup: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.