Opened 9 years ago

Closed 9 years ago

#12332 closed defect (invalid)

TabContainer: renders incorrectly if theme class added to body programmatically

Reported by: haniaa Owned by:
Priority: high Milestone: tbd
Component: Dijit Version: 1.6.0b1
Keywords: tabcontainer Cc:
Blocked By: Blocking:

Description (last modified by bill)

If the theme class (ie. 'class="claro"') is added to body tag programmatically rather than in the markup, the tabs don't render properly once the page loads. As soon as the browser is resized at all, or resize() is called, they will render correctly.

This is true across all browsers I tested (FF3.6, FF4b11, IE8, IE9b1, Safari; also Opera & Chrome), as well as all of the Dojo versions 1.4, 1.5, and 1.6b2. It is the same problem for Claro and Tundra (I didn't try any others).

Please see the attached screenshot for a picture of how the tabs load initially, as well as a test case. The test case is based on the TabContainer? declarative example at http://dojotoolkit.org/reference-guide/dijit/layout/TabContainer.html. The only difference is that I removed the 'class="claro"' from the body tag, and instead added the following:

 <script type="text/javascript">
        dojo.addOnLoad(function() {
			dojo.addClass(dojo.body(),"claro");
        });
    </script>

Attachments (2)

tabContainer.html (1.7 KB) - added by haniaa 9 years ago.
Test case
tabContainerProblem.png (3.4 KB) - added by haniaa 9 years ago.
screenshot

Download all attachments as: .zip

Change History (3)

Changed 9 years ago by haniaa

Attachment: tabContainer.html added

Test case

Changed 9 years ago by haniaa

Attachment: tabContainerProblem.png added

screenshot

comment:1 Changed 9 years ago by bill

Description: modified (diff)
Resolution: invalid
Status: newclosed
Summary: TabContainer renders incorrectly if theme class added to body programmaticallyTabContainer: renders incorrectly if theme class added to body programmatically

Thanks for attaching the test case.

AFAIK setting the theme programatically works fine, but you need to set it before the TabContainer is created, which in your testcase means before the parser runs. You could do something like:

<script type="text/javascript"
  src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js"
  djConfig="parseOnLoad: false">
...
dojo.addOnLoad(function(){
   dojo.addClass(dojo.body(),"claro");
   dojo.parser.parse();
});

The parseOnLoad:false isn't really necessary, just don't set parseOnLoad:true.

Also, you need to set width and height to 100% on BODY and HTML, not just on the TabContainer.

Note: See TracTickets for help on using tickets.