Ticket #5498 (new defect)

Opened 6 months ago

Last modified 4 months ago

TabContainer: Error rendering closable tab in IE (CSS race condition?)

Reported by: guest Owned by:
Priority: normal Milestone: 1.3
Component: Dijit Version: 1.0
Severity: normal Keywords:
Cc:

Description

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

screen-capture-1.png (5.5 kB) - added by guest 6 months ago.
Screenshot of uncorrect tab

Change History

Changed 6 months ago by guest

Screenshot of uncorrect tab

follow-up: ↓ 2   Changed 6 months ago by bill

  • owner deleted
  • component changed from General to Dijit

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.

in reply to: ↑ 1   Changed 6 months 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...

  Changed 5 months ago by bill

  • summary changed from Error rendering closable tab in IE to Error rendering closable tab in IE (CSS race condition?)
  • milestone set to 2.0

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.

  Changed 5 months ago by alex

  • milestone changed from 2.0 to 1.3

Milestone 2.0 deleted

  Changed 4 months ago by bill

  • summary changed from Error rendering closable tab in IE (CSS race condition?) to TabContainer: Error rendering closable tab in IE (CSS race condition?)
Note: See TracTickets for help on using tickets.