Understanding and chance the position of expand button in tree

Flow
1

Hello guys,

i am struggeling around with the treedesign.
I am using reindeer design and want to change the tree design.
I would Like to change the position of the expand arrow to after the text.
To be honest i managed to chance the arrow to another symbol.

But i didn’t understand how the expand of the tree works. I look at the html and did not figure out, which div or link will trigger the collapsing of the treeitems.

I would Like to chance my Tree to something like this:

Item1 + Item2 - uItem1 + uItem2 Item3 + Item5 + Thanks for any advice.

2

Nobody have an Idea ?

3

The arrow is actually just part of the background image of the node.
http://demo.vaadin.com/sampler/VAADIN/themes/reindeer/tree/img/arrows.png

.v-tree-node {background: transparenturl(tree/img/arrows.png) no-repeat 6px -10px;}

It might be enough making a new image with the arrows flipped and then set the new image to the background of node.

4

But how can i Move the “clickable” area for collapse and uncollapse the tree.

5

Set the margin-left of .v-tree-node-caption to 0px and margin-right to 16px (or more if needed).
The div below the node-caption is the clickable. if you disable all margin the node is completely covered by caption. So you need to uncover the right side using margin-right.

6

Marius is correct. The implementation of the Tree is a bit peculiar, how it handles the expand/collapse event. I would also prefer if there would be a separate element for the icon, but for now you will have to work with what we have.

Another option is to use a pseudo-element for the .v-tree-node, which shows the icon. You can then align that to the right side of the element, and it will also propagate click events to the parent element.

.v-tree-node {
  position: relative;
}

.v-tree-node:before {
  content: "+";
  position: absolute;
  top: 0;
  right: 0;
}