TabContainer: renders incorrectly if theme class added to body programmatically

[haniaa]

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>

[haniaa]

Test case

[haniaa]

screenshot

[bill]

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.