Opened 12 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 bill)

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)

screen-capture-1.png (5.5 KB) - added by guest 12 years ago.
Screenshot of uncorrect tab

Download all attachments as: .zip

Change History (7)

Changed 12 years ago by guest

Attachment: screen-capture-1.png added

Screenshot of uncorrect tab

comment:1 Changed 12 years ago by bill

Component: GeneralDijit
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 in reply to:  1 Changed 12 years ago by guest

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 12 years ago by bill

Milestone: 2.0
Summary: Error rendering closable tab in IEError 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:4 Changed 12 years ago by alex

Milestone: 2.01.3

Milestone 2.0 deleted

comment:5 Changed 12 years ago by bill

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 bill

Description: modified (diff)
Resolution: worksforme
Status: newclosed

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.

Note: See TracTickets for help on using tickets.