Tree dotted border

Vaadin 6 / 7 / 8 Framework UI
1

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

2

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.

3

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 ?

4

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.

5

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…

6

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.

7

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