How to change vaadin tree root Expand/Collapse icon

Flow
1

I am trying to change Vaadin tree root’s icon according to whether the root is expanded or collapsed.
If I speify the following style, the tree root will show root.gif in tree,
.v-tree-node-root {
background: transparent url(img/root.gif) no-repeat 0px 4px;
}

It is confusing when it is collapsed, cause the whole tree is displayed only with the icon and root text,
I tried the following style

.v-tree-node-root-expanded {
    background: transparent url(img/open.gif) no-repeat 0px 4px;
}

It has no effect, are there any way to change it?

Thank you!

2

Hello : )
You can try do it by using those attributes in your scss file
(Here within values for an example)

.v-tree-node-expanded > .v-tree-node-caption > div:before{
content: “\f129”;
font-family: FontAwesome;
}

.v-tree-node-caption > div:before{
content: “\f120”;
font-family: FontAwesome;
}

As a result this code will reproduce this (see attachment) on Tree icons.
Hopefully, it will help you.

27603.jpg

3

Are there any style for collpased?

The above will work if the tree node is expaned, but if it collapsed, the “\f129” will disappear.

Thanks!

4

Sorry, but I am not quite sure that I undestand, what you are asking about. Can you show an example how you want it to look like?
If you want the icon to be the same for expanded and collapsed node, you can just change in the above code “\f120” to “\f129”. Because the first part(.v-tree-node-expanded > .v-tree-node-caption > div:before) is resonsible for expanded root and the second one for collapsed one : )

Thanks

5

I would like to get look as the attached images(expanded.png and collapsed.png, sorry I reversed the file name).
I am using rendeer theme,
When the tree was expanded, the vaadin tree can display like what i expected.
But when the tree is collapsed, I would like to get like the expanded.png showed.

I changed the content to something else, but the “::before” will appear for all tree node which is I don’t want.

Thanks!
27701.png
27702.png

6

I used following and get a tree as attachment.
.v-tree-node-expanded > .v-tree-node-caption > div:before{
content: “\f055”;
font-family: FontAwesome;
}

The “Plus” sign is there all the time and it is displayed after Icon.

Is there a way to get result as my previous post?

Thank you!
27703.png

7

Yes, I understand you that this plus an annoying mark there. Unfortunately, I can’t say or, at least, try to say how you can remove it without reproducing the same problem in my browser. Can you share the part of code, where you create a Tree?
Thanks : )

8

Here is my whole project.

Thank you!
27706.zip (120 KB)

9

Please remove following from scss, otherwise, there will be two icon for root
.v-tree-node-root {
background: transparent url(img/root.gif) no-repeat 0px 4px;
}

10

Good Conversation…

11

Hello : )
There is, actually , a small change and, hopefully, it wil work for you as well.
So:
1.
/*
.dbas .v-tree-node-root {
background: transparent url(img/root.gif) no-repeat 0px 4px;
}*/
Remove this attribute, other way arround you have “computer” displayed two times (See attachment)

  1. .dbas .v-tree-node-root > .v-tree-node-caption > div:before {
    content: “\f055”;
    font-family: FontAwesome;
    display:none;
    }
    Just added “display:none;”
  2. The same here

.dbas .v-tree-node-expanded > .v-tree-node-caption > div:before {
content: “\f056”;
font-family: FontAwesome;
display:none;
}

The rest stays the same.
Hopefully, it will help you : )
27717.jpg
27718.png

12

I found that If I don’t have any of above style, it works the same.

Thank you!