TabContainer not rendered correctly inside nested BorderContainers

[ruzbeh]

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.

[bill]

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.

[bill]

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