custom treenode icons collapsed/expanded in IE

[neongrau]

the documentation states for "icon" on Treenodes:
"The path to an icon for the node. The preferred way to do this is to use the cls attribute and add the icon via a CSS background image"

.icon is not an option anyway since i want different icons for collapsed and expanded icons.

so i used css classes with the cls-attrib...

the generated html puts that class on the same div that holds the class for the expanded/collapsed state.

so i tried this CSS


.folder_220 .x-tree-node-icon
{
/* the collapsed icon */
background-image: url(folder_220.gif);
}
.folder_220.x-tree-node-expanded .x-tree-node-icon
{
/* the expanded icon */
background-image: url(folderopen_220.gif);
}

but this doesnt seem to work in IE, kinda like it doesnt support multiclasses combined with descending elements :(
does anyone know how to do that?

[JeffHowden]

IE certainly supports multiple classes on the same element. Are you doubly sure your CSS is correct?

Running a test locally, I came up with something that works in both FF and IE:

http://ext.vosandhowden.com/deploy/ext-1.0-alpha3/rev-4/examples/tree/organizer.html


.album-node .x-tree-node-icon{
background-image:url(album-collapsed.gif);
}

.album-node.x-tree-node-expanded .x-tree-node-icon {
background-image:url(album-expanded.gif);
}

[neongrau]

hi jeff!

i'm still not getting the expected results in IE.

while everything works fine in FF an Opera, IE always shows the last expanded icon that i've defined in my css. while the collapsed state is correct :cry:

i can confirm that your example works in IE, but could you please add another folder level with different expanded/collapsed icons? so that the parent and child folders have different icons?

like this:


.album-node .x-tree-node-icon{
background-image:url(album-collapsed.gif);
}

.album-node.x-tree-node-expanded .x-tree-node-icon {
background-image:url(album-expanded.gif);
}

.album-node2 .x-tree-node-icon{
background-image:url(album-collapsed2.gif);
}

.album-node2.x-tree-node-expanded .x-tree-node-icon {
background-image:url(album-expanded2.gif);
}


i somehow suspect thats what is causing the problem.

one day that :evil: browser is gonna kill me

[JeffHowden]

Well, the reorder example has nested nodes with different expand/collapse icons and it works fine. I'd suggest taking a peek into the relevant CSS and seeing that's accomplished.

[neongrau]

the reorder example has different node icons??

this one?
http://ext.vosandhowden.com/deploy/ext-1.0-alpha3/rev-4/examples/tree/reorder.html

i can't see any other icons than the default ones :S

to be sure we talk about the same thing i'll post a screenshot of the problem later

[neongrau]

ok here is the screenshot:
http://neongrau.googlepages.com/customtreenodeiconscollapsedexpandedinie


and this is the example page:




<link href="/stylesheets/ext/css/ext-all.css?1173294822" media="screen" rel="Stylesheet" type="text/css" />

<script src="/javascripts/ext/yui-utilities.js?1173325510" type="text/javascript"></script>
<script src="/javascripts/ext/ext-yui-adapter.js?1173325510" type="text/javascript"></script>
<script src="/javascripts/ext/ext-all.js?1173325510" type="text/javascript"></script>

<style>
.folder_0 .x-tree-node-icon {
background-image: url(/images/legacy/infobase/folder_0.gif);
}
.folder_0.x-tree-node-expanded .x-tree-node-icon {
background-image: url(/images/legacy/infobase/folderopen_0.gif);
}

.folder_220 .x-tree-node-icon {
background-image: url(/images/legacy/infobase/folder_220.gif);
}
.folder_220.x-tree-node-expanded .x-tree-node-icon {
background-image: url(/images/legacy/infobase/folderopen_220.gif);
}

.folder_40 .x-tree-node-icon {
background-image: url(/images/legacy/infobase/folder_40.gif);
}
.folder_40.x-tree-node-expanded .x-tree-node-icon {
background-image: url(/images/legacy/infobase/folderopen_40.gif);
}
</style>

<div id=tree></div>

<script>
Test = function() {
return {
init: function(){
this.tree = new Ext.tree.TreePanel('tree', {
animate:true,
loader: new Ext.tree.TreeLoader({dataUrl:'<%= url_for(:action => :folder, :id => 17) %>'}),
enableDD:false,
containerScroll:true,
rootVisible: false
});
this.tree.setRootNode(new Ext.tree.AsyncTreeNode({text:'',id:'root'}));
this.tree.render();
this.tree.root.expand();
}
}
}();

Ext.onReady(Test.init, Test);
</script>


i can't see anything wrong with my css, but maybe i need a few more pairs of eyes :S

[neongrau]

just found out with this ugly hack it'll work in IE too :oops:



<style>
.folder_0 .x-tree-node-icon {
background-image: url(/images/legacy/infobase/folder_0.gif);
}
.folder_0 .x-tree-node-icon.x-tree-node-expanded {
background-image: url(/images/legacy/infobase/folderopen_0.gif);
}

.folder_220 .x-tree-node-icon {
background-image: url(/images/legacy/infobase/folder_220.gif);
}
.folder_220 .x-tree-node-icon.x-tree-node-expanded {
background-image: url(/images/legacy/infobase/folderopen_220.gif);
}

.folder_40 .x-tree-node-icon {
background-image: url(/images/legacy/infobase/folder_40.gif);
}
.folder_40 .x-tree-node-icon.x-tree-node-expanded {
background-image: url(/images/legacy/infobase/folderopen_40.gif);
}
</style>

<script>
Ext.tree.TreeNodeUI.prototype.updateExpandIcon = function(){
if(this.rendered){
var n = this.node;
var cls = n.isLast() ? "x-tree-elbow-end" : "x-tree-elbow";
var hasChild = n.hasChildNodes();
if(hasChild){
cls += n.expanded ? "-minus" : "-plus";
var c1 = n.expanded ? "x-tree-node-collapsed" : "x-tree-node-expanded";
var c2 = n.expanded ? "x-tree-node-expanded" : "x-tree-node-collapsed";
this.removeClass("x-tree-node-leaf");
Ext.fly(this.elNode).replaceClass(c1, c2);
Ext.fly(this.iconNode).replaceClass(c1, c2);
}else{
Ext.fly(this.elNode).replaceClass("x-tree-node-expanded", "x-tree-node-leaf");
Ext.fly(this.iconNode).replaceClass("x-tree-node-expanded", "x-tree-node-leaf");
}
this.ecNode.className = "x-tree-ec-icon "+cls;
}
}
</script>[/code]

[JeffHowden]

I'm sure that's not necessary as the regular tree works with expand/collapse folder icons without it. I suspect the problem you're seeing is due to cascading. For example, the following:


div.meh {
background-color: red;
}

div.foo.bar div.meh {
background-color: lime;
}

will cause all div elements with a class of meh that are descendants of div elements with classes foo and bar to be colored lime. It doesn't matter how deeply descended they are. Any div elements with a class of meh that are not descendants of div elements with classes of foo and bar will have a red background. If you wish to override and effect just the ones that are direct descendants and have all others continue to have the red background color, you'll need to increase the specificity of the CSS selectors (since IE doesn't support child selectors).


div.meh, div.foo.bar div.meh div.meh {
background-color: red;
}

div.foo.bar div.meh {
background-color: lime;
}

Hopefully you can apply this logic to your custom tree CSS.

[neongrau]

i know that i would need to add css classes to prevent IE from applying the background to further children.

but practically this is plain impossible with the way the classes are set and IE's css support.

i guess you can't think of any class combination that would work as well?

the only solution i see is to apply the collapsed/expanded classname to the icon as well (as i did in the manual change of the "updateExpandIcon" method).

makes me wonder... bug report or feature request?

[dfenwick]

I just tested this with IE6 and FF and styling is working fine. Do you possibly have a cached CSS file somewhere in IE? On my machine it applies my styles exactly the way it's supposed to. I rewrote the reorder example to test multiple classes returned from the custom UI node. Works exactly the same in IE as it does in FF.

[neongrau]

i'm 100% sure it's not a caching problem, see the example code i posted, thats exactly the code i used for the screenshots.

i'd be happy to be proven wrong so that i could style it without rewiring anything from the Ext framework. but i don't see it.

is there any way to see your example live or code/css with screenshots?

[dfenwick]

Well I just re-reverified this again and I see exactly what you're saying. It's behaving exactly like you said it did. A simple google search results in this:

http://blogs.msdn.com/ie/archive/2005/09/02/460115.aspx

The relevant quote from that article is:


Multi-class selectors:

When the class selector support was originally written it was drawn up based on the CSS 1 spec which only supported a single class selector in each simple selector. We wound up keeping this behavior even after implementing portions of later versions of CSS. The end result is that we always threw out the extra classes in the selector and only kept the last one in the list and matched based on that.

Well, some sites use multi-class selectors so when we looked at doing CSS 2.1 selectors work it was pretty easy to upgrade our class selectors to allow more than one class to be applied. When in strict mode we now obey all specified class selectors per simple selector. While you won't often use the feature it can be used for some interesting applications. One of my original test cases would use combinations of red, yellow, and blue classes to paint elements based on their combined color. A selector such as .red.yellow would paint and element orange if it contained both of these classes in a space separated list within the class attribute. Any elements not matching at least both of these wouldn't match and so you can more accurately apply hierarchical styles.

DHTML Kitchen has a great example of multi-class selectors and the current compatibility problems.

So it's actually a bug in all versions of IE prior to 7, and it's a bug in IE 7 unless you're running in strict mode. Apparently (based on googling) there's no workaround for it. So having an appropriate class on an icon is probably a good thing.

[neongrau]

THANK YOU!!!

i was already thinking i'm blind

[neongrau]

dfenwick: "and it's a bug in IE 7 unless you're running in strict mode"

yes in strict mode IE7 can do it right, but in tagsoup-/quirksmode it shows the same behavior as IE6.

i would love to ditch IE6 support, but sadly it's not my decision :((

[dfenwick]

dfenwick: "and it's a bug in IE 7 unless you're running in strict mode"

yes in strict mode IE7 can do it right, but in tagsoup-/quirksmode it shows the same behavior as IE6.

i would love to ditch IE6 support, but sadly it's not my decision :((

Jack will have to decide what to do about this. It seems to me there are only 2 choices here to work around this obvious CSS2 bug. Either a single element can be inserted between the div and the icon with the user-defined class name attached to it, or the class for the img tag itself needs to be altered. In either case, there's code that must be written to accomplish this.

As an added test, I tried it against the browser compatibility library (http://dean.edwards.name/IE7/ which is a layer of compatibility fixes for IE5 and IE6 and it at least styles the collapsed images properly. It still fails on the expanded images though.

[jack.slocum]

Please see this thread guys:

http://extjs.com/forum/showthread.php?t=3937