Tabsheet header twinkle

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

Hi.

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

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;
}