Styling Tabs of Tabsheet individually

Vaadin 6 / 7 / 8 Framework UI
1

Hi,

I would like to style tab items in a tab sheet individually. They should get different backgrounds and there should be space between tab items to group them.

Is this possible? How?

Thanks,
Roland

2

I found out that I cannot do it with CSS, because nth-child is not supported in IE.

So I need Javascript. Is there a way that I can set an ID of a specific component (tab item)?

3

Hi,

One very hackish way of doing this is to add a DebugId for the TabSheet and then use Window.executeJavaScript to add some additional classnames to individual tabs.

myTabs.setDebugId("foo");

mainWindow.executeJavaScript("document.getElementById(\"foo\").[find the correct element]
.className += \"my-style\"");

The "[find the correct element]
" part of the script should traverse the DOM to find the correct tab element (e.g. firstChild.childNodes[2]
). This part will be highly dependent on the Vaadin client side engine internals, and hence might break in future releases. You are warned :slight_smile:

4

Thanks for the setDebugId tip, I have tried overriding paintContent and setting an attribute, but that did not work.

5

In order for that to work, you also need to override the client side method “updateFromUIDL” that will receive the new attribute and handle it there.