Icons are not displayed with IE9 #58

Closed
manuelbernhardt opened this Issue Jul 21, 2011 · 11 comments

Comments

Projects
None yet
6 participants
@manuelbernhardt

This was reported by two members on my team, I could not test it myself but the bottom line seems to be that on IE9 icons do not show. On IE8 and in other browsers things work fine.

We use jQuery 1.6.2 and have the latest version from the pre-1.0 branch. We use the type plugin to have custom icons displayed.

@manuelbernhardt

This comment has been minimized.

Show comment Hide comment
@manuelbernhardt

manuelbernhardt Jul 21, 2011

We found a workaround for this issue which is also reported here: http://code.google.com/p/jstree/issues/detail?id=932

The workaround involves including this in a CSS stylesheet:

a > .jstree-icon { background-position: 0 0; }

The problem is apparently here: https://github.com/vakata/jstree/blob/v.pre1.0/jquery.jstree.js#L3816

For some reason this does not work with IE9

We found a workaround for this issue which is also reported here: http://code.google.com/p/jstree/issues/detail?id=932

The workaround involves including this in a CSS stylesheet:

a > .jstree-icon { background-position: 0 0; }

The problem is apparently here: https://github.com/vakata/jstree/blob/v.pre1.0/jquery.jstree.js#L3816

For some reason this does not work with IE9

@vakata

This comment has been minimized.

Show comment Hide comment
@vakata

vakata Jul 22, 2011

Owner

Hi, thank you for reporting - could you please show me a part of your code - how do you set the icons in the types plugin? I need this because I could not reproduce the issue (I checked http://www.jstree.com/documentation/types in IE9).

Kindest regards,
ivan

Owner

vakata commented Jul 22, 2011

Hi, thank you for reporting - could you please show me a part of your code - how do you set the icons in the types plugin? I need this because I could not reproduce the issue (I checked http://www.jstree.com/documentation/types in IE9).

Kindest regards,
ivan

@manuelbernhardt

This comment has been minimized.

Show comment Hide comment
@manuelbernhardt

manuelbernhardt Jul 23, 2011

Here is one example:

var requirementTreeTypes = {
    "max_depth" : -2,
    "max_children" : -1,
    "types" : {
        "default" : {
            "valid_children" : "none",
            "icon" : {
                "image" : "/public/images/jstree/file.png"
            }
        },
        "requirementFolder" : {
            "valid_children" : [ "default", "requirement", "requirementFolder" ],
            "icon" : {
                "image" : "/public/images/jstree/folder.png"
            }
        },
        "root": {
            "valid_children" : ["default", "requirement", "requirementFolder"],
            "icon" : {
                "image" : "/public/images/jstree/folder.png"
            },
            "start_drag" : false,
            "move_node" : false,
            "delete_node" : false,
            "remove" : false
        }
    }
};

The file and folder png files are taken from the demonstration.

I probably should mention that we use the theme-roller plugin, but the CSS that causes issues in IE9 is the one dynamically generated by the types plugin.

Here is one example:

var requirementTreeTypes = {
    "max_depth" : -2,
    "max_children" : -1,
    "types" : {
        "default" : {
            "valid_children" : "none",
            "icon" : {
                "image" : "/public/images/jstree/file.png"
            }
        },
        "requirementFolder" : {
            "valid_children" : [ "default", "requirement", "requirementFolder" ],
            "icon" : {
                "image" : "/public/images/jstree/folder.png"
            }
        },
        "root": {
            "valid_children" : ["default", "requirement", "requirementFolder"],
            "icon" : {
                "image" : "/public/images/jstree/folder.png"
            },
            "start_drag" : false,
            "move_node" : false,
            "delete_node" : false,
            "remove" : false
        }
    }
};

The file and folder png files are taken from the demonstration.

I probably should mention that we use the theme-roller plugin, but the CSS that causes issues in IE9 is the one dynamically generated by the types plugin.

@vadimburak

This comment has been minimized.

Show comment Hide comment
@vadimburak

vadimburak Jul 26, 2011

Hi, I'm using jstree 1.0-rc3 and experience the same issue in IE9. I found more people complaining about the same problem but looks like the issue cannot be reproduced every time.
In my case I have two instances of tree control on the same page (second one is loaded when an item is selected in the first tree) and the icons disappear from the first tree only when the second one is loaded. All icons remain visible if the second tree load is not forced.

BTW manuelbernhardt suggested fix didn't work for me.

Hi, I'm using jstree 1.0-rc3 and experience the same issue in IE9. I found more people complaining about the same problem but looks like the issue cannot be reproduced every time.
In my case I have two instances of tree control on the same page (second one is loaded when an item is selected in the first tree) and the icons disappear from the first tree only when the second one is loaded. All icons remain visible if the second tree load is not forced.

BTW manuelbernhardt suggested fix didn't work for me.

@sanelson2000

This comment has been minimized.

Show comment Hide comment
@sanelson2000

sanelson2000 Feb 22, 2012

Apparently IE9 does not like setting the background-position property after you've set the background-url property. I was able to hack around this issue by changing this line:
if(tp.icon.image) { icons_css += ' background-image:url(' + tp.icon.image + '); '; }
to this:
if(tp.icon.image) { icons_css += ' background:url(' + tp.icon.image + ') top left no-repeat; '; }

Of course, I believe this would render the following line useless (in IE9 at least), but for my purposes, it works because the background position for in image in my case should always be top left.

Apparently IE9 does not like setting the background-position property after you've set the background-url property. I was able to hack around this issue by changing this line:
if(tp.icon.image) { icons_css += ' background-image:url(' + tp.icon.image + '); '; }
to this:
if(tp.icon.image) { icons_css += ' background:url(' + tp.icon.image + ') top left no-repeat; '; }

Of course, I believe this would render the following line useless (in IE9 at least), but for my purposes, it works because the background position for in image in my case should always be top left.

@felipero

This comment has been minimized.

Show comment Hide comment
@felipero

felipero Mar 23, 2012

I'm having this issue too.

This is Google Chrome: http://d.pr/kq9O
This is IE9: http://d.pr/pYbG

The hack suggested by sanelson2000 didn't work for me. Any other ideas?

I'm having this issue too.

This is Google Chrome: http://d.pr/kq9O
This is IE9: http://d.pr/pYbG

The hack suggested by sanelson2000 didn't work for me. Any other ideas?

@sanelson2000

This comment has been minimized.

Show comment Hide comment
@sanelson2000

sanelson2000 Mar 23, 2012

That doesn't look like the same issue I was having. It looks like it's not applying the theme properly. I was seeing something similar when I tried to cache my javascript files and the path to the theme got messed up. Are you seeing any errors in the javascript console? Maybe something is erroring out and preventing things from loading properly, or maybe the path to the themes folder is incorrect.

http://www.jstree.com/documentation/themes

That doesn't look like the same issue I was having. It looks like it's not applying the theme properly. I was seeing something similar when I tried to cache my javascript files and the path to the theme got messed up. Are you seeing any errors in the javascript console? Maybe something is erroring out and preventing things from loading properly, or maybe the path to the themes folder is incorrect.

http://www.jstree.com/documentation/themes

@felipero

This comment has been minimized.

Show comment Hide comment
@felipero

felipero Mar 30, 2012

Hi. No errors on js console. The theme folder path is ok, since it show in firefox, right?
I think this is something about CSS.

Hi. No errors on js console. The theme folder path is ok, since it show in firefox, right?
I think this is something about CSS.

@felipero

This comment has been minimized.

Show comment Hide comment
@felipero

felipero Mar 30, 2012

Found the problem.
Somehow this property:

.jstree-default ins { background-image:url("d.png"); background-repeat:no-repeat; background-color:transparent; }

works for Chrome/Firefox but not for IE. Something about the path of the image.

Fixed this way: .jstree-default ins { background-image:url("js/jstree/themes/default/d.png") !important;}

It was affecting IE7, IE8 and IE9. Didn't test in IE10 or IE6.

Found the problem.
Somehow this property:

.jstree-default ins { background-image:url("d.png"); background-repeat:no-repeat; background-color:transparent; }

works for Chrome/Firefox but not for IE. Something about the path of the image.

Fixed this way: .jstree-default ins { background-image:url("js/jstree/themes/default/d.png") !important;}

It was affecting IE7, IE8 and IE9. Didn't test in IE10 or IE6.

@vakata

This comment has been minimized.

Show comment Hide comment
@vakata

vakata Aug 23, 2012

Owner

Cannot reproduce this on the jstee.com page, most likely it was fixed a while ago.

Owner

vakata commented Aug 23, 2012

Cannot reproduce this on the jstee.com page, most likely it was fixed a while ago.

@vakata vakata closed this Aug 23, 2012

@himanshupareek

This comment has been minimized.

Show comment Hide comment
@himanshupareek

himanshupareek Jul 2, 2013

sanelson2000's answer worked. Thanks.

sanelson2000's answer worked. Thanks.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment