Opened 11 years ago
Closed 11 years ago
#5498 closed defect (worksforme)
TabContainer: Error rendering closable tab in IE (CSS race condition?)
| Reported by: | guest | Owned by: | |
|---|---|---|---|
| Priority: | high | Milestone: | 1.3 |
| Component: | Dijit | Version: | 1.0 |
| Keywords: | Cc: | ||
| Blocked By: | Blocking: |
Description (last modified by )
Hello,
I'm running into an error where a tab is not rendered correctly in IE 7 as soon as I make the tab closable.
I have the following page:
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://o.aolcdn.com/dojo/1.0.2/dojo/dojo.xd.js"" djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.layout.TabContainer");
dojo.require("dijit.layout.ContentPane");
</script>
<style type="text/css">
@import "http://o.aolcdn.com/dojo/1.0.2/dojo/resources/dojo.css";
@import "http://o.aolcdn.com/dojo/1.0.2/dijit/themes/tundra/tundra.css";
</style>
<title>Test</title>
</head>
<body class="tundra">
<div dojoType="dijit.layout.TabContainer" jsId="tablist" style="width:100%;height:100%;">
<div dojoType="dijit.layout.ContentPane" closable="true" title="testing">test</div>
</div>
</body>
</html>
As soon as I leave out the closable="true" part, it renders as it should. I have tested the same page in Firefox 2.0 and Safari 3.0. No problems there.
Attachments (1)
Change History (7)
Changed 11 years ago by
| Attachment: | screen-capture-1.png added |
|---|
comment:1 follow-up: 2 Changed 11 years ago by
| Component: | General → Dijit |
|---|---|
| Owner: | anonymous deleted |
I'm not sure if this is related or not but you need to have html, body { width: 100%, height: 100% } type CSS. See the mail demo for an example.
comment:2 Changed 11 years ago by
Replying to bill:
I'm not sure if this is related or not but you need to have
html, body { width: 100%, height: 100% }type CSS. See the mail demo for an example.
Adding
html, body {
width: 100%;
height: 100%;
}
did not change anything. Thanks for the suggestion though...
comment:3 Changed 11 years ago by
| Milestone: | → 2.0 |
|---|---|
| Summary: | Error rendering closable tab in IE → Error rendering closable tab in IE (CSS race condition?) |
I assume this is a race condition loading CSS. Note that http://download.dojotoolkit.org/release-1.0.2/dojo-release-1.0.2/dijit/tests/layout/test_TabContainer.html works fine.
Until we get synchronous CSS loading working (jburke is working on this for builds now, but that still leaves the problem of pulling stuff from the edge server), you will have to workaround it by add a myTabContainer.layout() method on a setTimeout() on page load.
comment:5 Changed 11 years ago by
| Summary: | Error rendering closable tab in IE (CSS race condition?) → TabContainer: Error rendering closable tab in IE (CSS race condition?) |
|---|
comment:6 Changed 11 years ago by
| Description: | modified (diff) |
|---|---|
| Resolution: | → worksforme |
| Status: | new → closed |
The other option is to put your <style> tags pulling in the CSS before your dojo.require() calls. That seems to fix the problem. We changed all our tests to work that way some time ago.
Screenshot of uncorrect tab