Valo Three icon change to +/-

Flow
1

Hi i am using Vaadin 7.6.5 with Spring boot

and trying to change the tree node expand to -(minus) and tree node non expand to +(plus)

below is my css

.v-tree-node-expanded > .v-tree-node-caption > div:before {
content: “\e7f5”;
width:“50px”;
height:“50px”;
transform: rotate(180deg);
font-family: Vaadin-Icons;
}

.v-tree-node-expanded > .v-tree-node-caption > div:after {
content: “\e800”;
width:“50px”;
height:“50px”;
transform: rotate(180deg);
font-family: Vaadin-Icons;
}

.v-tree-node-caption > div:before {
content: “”;
font-family: Vaadin-Icons;
display: inline-block;
/width: 0.5em;/
text-align: center;
margin: 0 0.6em 0 0.8em;
-webkit-transition: all 100ms;
-moz-transition: all 100ms;
transition: all 100ms;
}

.v-tree-node {

        color: $v-vega-light-black-color;
        font-weight: 400;
        
        &:hover {
            color: #333333;
        }
        
        .v-tree-node-selected {
            color: #333333;
            font-weight: 600;
            &:after {
                background: $v-vega-dark-white-color;
                
            }
            
        }

    }
}

it is showing -(minus) icon correctly but when i click on it is not showing the +(plus) icon.

2

.v-tree-node-caption > div:before has empty content: “”. Put the content: “\e800”; there.

   .v-tree-node-caption > div:before {
    content: "\e800";
     font-family: Vaadin-Icons;
    display: inline-block;
    /*width: 0.5em;*/
    text-align: center;
    margin: 0 0.6em 0 0.8em;
    -webkit-transition: all 100ms;
    -moz-transition: all 100ms;
    transition: all 100ms;
}
3

Hi Johannes ayry,

By doing above ie putting content: “\e800”; it will add +(plus) to all the nodes .

I am trying to add + for parent nodes and minus for same parent node when it is expanded.
And for all other chilld nodes i dont want to put any icon.

Thanks

4

If you don’t want to show any icon for leaf nodes, call setChildrenAllowed(itemId, false) for each item you don’t want to have the icon.