CSS for focused horizontal layout

Vaadin 6 / 7 / 8 Framework UI
1

Hi,
I have a textfield inside horizontallayout which I have implemented as custom tabs which wud generate dynamicaly .

Now my problem is I want to use CSS for the focused layouts on which I have clicked so that I can diffrentiate the clicked layout from other layout which are not clicked.I tried to achieve this using CSS…but I could not .

Can anyone please help me out regarding this issue.

Thanks in advance.
Kavitha

2

Hey,

The CSS selector for horizontal layouts is “v-horizontallayout”. If you want to target a specific layout, you can add a style name to it via addStyleName. Then you simply target that style name in your (S)CSS, for example:

.v-horizontallayout.<style-name> {
  background: red;
}

To make style changes upon click, you can add a LayoutClickListener to your layout(s), and add/remove style names accordingly.