An example of a customized tree

Hi I’ve got my custom tree item icons, captions and dynamic context menu working with the vaadin tree, which is all great. I wish I could customize the following:

  1. Tree connectors (lines that get drawn between the parent to children)
  2. Space between the tree children (so items dont look too clustered)
  3. Width between the tree item icon and the tree item caption.

It is not clear which css parameters need to be changed for the tree to achieve what I want. It will be great if someone has done it before or gives me some guidlines…



Some initial pointers:

I gave a short overview what can be done
To actually build this, most of the core styles will need to be overridden:


for .v-tree-node-children, add a vertical dotted line as a background image, remove the left padding
add the left padding to .v-tree-node’s
add junction dotted lines as a background image to .v-tree-node .v-tree-node-caption’s (with negative margin, same size as the left padding)
add an opaque background image with the final junction dotted line to .v-tree-node:last-child. Note, that here the background color of this image needs to match the background color of what’s behind the tree.

[/list]The catch of course is that this won’t work in IE6/7, since it doesn’t support the :last-child selector. You can workaround this limitation by extending (by which I probably mean copy-pasting-and-modifying) the VTree class to add some additional classname for the last node.

The two other issues are much easier to achieve:

Just increase the line-height attribute for .v-tree. Try something from 18px to 30px, for example.

Something like this should do it

.v-tree-node-caption .v-icon {
     margin-left: ...


Some initial pointers:

Can you provide a sample css for this tree lines requirement.I have followed your steps but it didnt given me the expected result.I think my css is not correct.


any news on that one? i’m trying to accomplish that style with the new v8 TreeGrid but I can’t get it to work completely.