#4383 closed defect (worksforme)
Top level tree icon not displayed in IE
| Reported by: | guest | Owned by: | bill |
|---|---|---|---|
| Priority: | high | Milestone: | 1.0 |
| Component: | Dijit | Version: | 0.9 |
| Keywords: | tree icon | Cc: | |
| Blocked By: | Blocking: |
Description
If icons are added to trees (for example, using the code below), IE does not display top level icons while Firefox, for example, does.
To the test_Tree.html file make the tree code look like
<div dojoType="dijit.Tree" id="mytree" store="continentStore" query="{type:'continent'}"
labelAttr="name" typeAttr="type">
<script type="dojo/method" event="getIconClass" args="item">
return "testTree";
</script>
</div>
by adding the script and the add the style
<style type="text/css">
.testTree {
background-image: url('images/note.gif'); background-repeat: no-repeat; width: 20px; height: 20px;
}
</style>
In IE, icons display for child nodes, but not for the parents. In Firefox, they display for both.
Attachments (3)
Change History (9)
Changed 14 years ago by
comment:1 Changed 14 years ago by
| Resolution: | → worksforme |
|---|---|
| Status: | new → closed |
comment:3 Changed 14 years ago by
| Resolution: | worksforme |
|---|---|
| Status: | closed → reopened |
Try IE7. I'm attaching screen shots this time for IE7 and Firefox. Here is the code that works on my directory structure without all the test stuff.
<!DOCTYPE HTML PUBLIC "-W3CDTD HTML 4.01EN"
<html> <head>
<title>Dijit Tree Test</title>
<style type="text/css">
@import "../dojoAjax/dijit/themes/tundra/tundra.css";
</style>
<script type="text/javascript" src="../dojoAjax/dojo/dojo.js"
djConfig="parseOnLoad: true, isDebug: true"></script>
<script language="JavaScript?" type="text/javascript">
dojo.require("dojo.data.ItemFileReadStore?"); dojo.require("dijit.Tree"); dojo.require("dijit.ColorPalette?"); dojo.require("dijit.Menu"); dojo.require("dojo.parser"); scan page for widgets and instantiate them
</script>
<style type="text/css">
.testTree {
background-image: url('images/note.gif'); background-repeat: no-repeat; width: 20px; height: 20px;
}
</style>
</head> <body class="tundra">
<div dojoType="dojo.data.ItemFileReadStore?" jsId="continentStore"
url="./data/countries.json"></div>
<div dojoType="dijit.Tree" id="mytree" store="continentStore" query="{type:'continent'}"
labelAttr="name" typeAttr="type">
<script type="dojo/method" event="getIconClass" args="item">
return "testTree";
</script>
</div>
</body> </html>
comment:4 Changed 14 years ago by
comment:5 Changed 14 years ago by
| Milestone: | → 1.0 |
|---|---|
| Owner: | set to bill |
| Status: | reopened → new |
I'll take a look although may have to close as "worksforme". Maybe we need a zoom: 1 in the CSS because the element is being treated as inline, and width and height don't work on inline elements.
comment:6 Changed 14 years ago by
| Resolution: | → worksforme |
|---|---|
| Status: | new → closed |
Sorry, I tried both IE6 and IE7, and can't reproduce.
Works for me on IE6. I followed your instructions (and I attached the testcase). I'll check in your change so that we get icons in the test file.