Tabsheet header twinkle

Flow
1

Hi,

I’d like to use icon in my Tabsheet headers but tab header twinkle on tab selection.

You can see the problem on the vaadin sample site.

http://demo.vaadin.com/sampler/#ui/structure/tab-sheet

Select Tab 7 icon in the configuration panel.

I use Vaadin 7.5.1 with the Runo theme and the last version of Firefox.
The issue doesn’t occur with reindeer theme (Tested with the vaadin sample site).
EDIT: Works fine on IE but not on Firefox

Thanks in advance for your help.

Arnaud

2

Hi.

It seems like a bug in Tabsheet / the Runo theme. Created issue
https://dev.vaadin.com/ticket/18515

3

Thanks for creating the issue Risto Yrjänä.

A workaround is to set a style on each tab and to add a background to the caption.

Set in your code:

Tab tab = tabsheet.addTab(
tab.setCaption(caption);
tab.setStyleName(myStyleName);

And in your css:

.v-tabsheet-tabitemcell-myStyleName .v-captiontext {
    background: url("img/icon.png") no-repeat scroll 0% 0% transparent !important;
}