node icon size

[Jean-Paul Ritz]

Hi Ivan

In order to have more control on the icon size on a node level I have change the code by adding a size property for direct data from json object. This works fine and is very helpful so is it possible to integrate that in the code.

at line 1386
                   size        : d.size || "16px", // added the size property for the icon provided by json

at line 1642
                    if(obj.size)
                        node.childNodes[1].childNodes[0].style.backgroundSize = obj.size;
                    else
                        node.childNodes[1].childNodes[0].style.backgroundSize = 'auto';


Jean-Paul

[Ivan Bozhanov]

If you need that much flexibility - simply use a class, I have intentionally removed all size and position options (which were available in 1.0) as it is better off to do such customizations using a class, otherwise the code bloats up and is harder to maintain.

Best regards,
Ivan

[Jean-Paul Ritz]

Hi Ivan

I've try the solution with a class but it is any time overide by the background size ="auto"

<a class="jstree-anchor  jstree-clicked icon-size" href="sys_client_script_form.do" target="_blank"><i class="jstree-icon jstree-themeicon jstree-themeicon-custom" style="background-image: url(http://localhost:8080/EasyWebSoft/images/icons/jsscript_32.jpg); background-size: auto; background-position: 50% 50%;"></i>ClassManager</a>

icon-size is the css class I've added ti a_attr

.jstree-node > .icon_size > .jstree-themeicon{
    background-size: 16px;
   
}
it is the same if put

.jstree-node > .icon_size > .jstree-themeicon{
   size: 16px;
   
}

regards
Jean-Paul

[Ivan Bozhanov]

You can overwrite that with !important - I know it is not good practice, but it will work. Unfortunately there is no way for me to make it any more flexbile.

Best regards,
Ivan

[Jean-Paul Ritz]

Hi Ivan

I've tried to  overwrite the style with important this didn't work. When I debug the css in the browser I can see the style element is still on auto and that syle I've put it the style (    background-size:16px important!; ) sheet is crossed.
For me as you have put the     background-size:auto on the element it is not possible to overwrite it. May be I am wrong in this case can you provide as example where it works.

Regards

Jean-Paul



Le dimanche 19 janvier 2014 08:29:14 UTC+1, Jean-Paul Ritz a écrit :

[Ivan Bozhanov]

I will need to see your CSS - you can always overwrite inline styles with important. (Unless the inline style is !important too, but that is not the case). Are you sure you are apllying this correctly to the right icon?
Anyway - simply go with a class name instead of path to an icon and add whatever rules you want for that class, when using a class backgroundSize is not set ... so basically just set "icon" to "myIcon" and then:
#your-tree .myIcon { background-size ... background:url(... etc

Best regards,
Ivan

[nguyen dang Thanh]

Hello guys,

I'm using jsTree 3.1.1 and I cannot see the code at line 1386 as your comment.

Could you tell me which version you are using or where can I custom to fix the issue in version 3.1.1

[Ivan Bozhanov]

I never said anything about a line in the source - you will be better off not modifying the source - simply use a class, or a rule in your CSS file as I said above.

Best regards,
Ivan

[nguyen dang Thanh]

Hi  Bozhanov,

Do you mean we will edit the css file, not the code of jstree. But when I inspect elements, I saw the you are setting the background-size in element style, not in CSS class

style="background-image: url(http://localhost:8080/ebx-addon-gram/ImageProvider?imagePath=Chrysanthemum.jpg); background-size: auto; background-position: 50% 50%;"

I don't see any way to customize the option background-size without editing the source code.

Best regards!

[nguyen dang Thanh]

We can use the !important as use said. 

But I'm trying to set the property background-size = "contain"

If we apply this change for the correspond CSS class, the built-in icons of JSTree(file, folder) will not be displayed because you are using an image (32px.png contains all icons - just re-set the background-position). this property will change the way JSTree display these built-in icons completely

[Ivan Bozhanov]

Apply it to your own class - you are setting some kind of icon after all - just set the icon with a class. So in your data you'd have:
icon : "myicon"
Then in your own css file you'd have:
.myicon { background-size:contain; background-url.... }

Best regards,
Ivan

[nguyen dang Thanh]

Yes, I got it.

As my understand, the icon property will set icon URL or the CSS class. Is it right?

But in my case, I'm using the dynamic data, it mean one node can be displayed by one special icon base on it's data. So in my example, i'm using icon property to specify the URL because it is so terrible if I create one CSS class for one node.

I see we can use the "types" plugin to display icon, but it doesn't change the fact that I've to create one type for one node to display a node by a specific icon.

do you understand what I mean.

Anyway, your answer is very helpful for me (a newbie of jsTree) to understand your product.

Thanks and best regards!

[Ivan Bozhanov]

Yes, it is either a URL or a className, className is a lot more flexible of course. The URL functionality is lacking but I want to keep it that way - using a complicated JS object to enumerate CSS properties seems a bad idea to me. You can of course target all your custom icons using a className:
.jstree-themeicon-custom { background-size:contain !important; }

Best regards,
Ivan