Opened 10 years ago
Closed 10 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 )
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)
Change History (3)
Changed 10 years ago by
Attachment: | tabContainer.html added |
---|
comment:1 Changed 10 years ago by
Description: | modified (diff) |
---|---|
Resolution: | → invalid |
Status: | new → closed |
Summary: | TabContainer renders incorrectly if theme class added to body programmatically → TabContainer: 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.
Test case