Tree dotted border

Hello,

I have a problem with a tree or with more than one tree. In my Application i have on the left hand a navigation with tree´s. And if the user select a item on the left side will display the content. Thats works!

Now i have become the problem, that in every tree one selection will be stored. This problem i can resolved, because i will react on a click on the other table and set all tree to select(null). That works, too. Know my problem is, that the methode select(null) the blue selected cancel but there is a dotted border on the old selection and i found nothing to delete this dotted border.
For a better description i attach a screenshot.

Thanks for your help!

Swoop
12248.png

The dotted border is the focus indicator. If you want to get rid of it, you can move the focus somewhere else where it belongs.

I think it’s possible to remove it also with CSS, but then you won’t see the focus when you would need it.

Okay thats sounds good. But i don´t know how i can remove the focus?
Or how i can remove the dotted broder in css ?

There is no way to remove focus, just to grab it. To move the focus to a Vaadin component, call component.focus(). The Tree or Table does not currently support focusing a specific item.

When a tree item is focused, it gets the “v-tree-node-focused” style. It’s by default “border: 1px dotted black”. Just notice that making it invisible makes keyboard navigation and selection in the tree difficult.

okay to test the impact I added this css code:

.v-tree-node-focused {
	border: 0px;
}

but nothing happens? I also delete my browser cache…

Looks like the rule needs the span element to make it more specific.

.v-tree-node-focused span {
	border: none;
	padding: 1px;
}

Firebug is useful for analyzing and testing CSS code.

thanks for your help!
With this css code it works fine and Firebug is a nice tool =)