Vaadin 7.2 - Tabsheet icons in tabs are removed on each selection

Vaadin 6 / 7 / 8
1

Hi.

We are testing the new 7.2 version with some of our applications. One of the problems we’ve had is the following.

Tabsheets have tabs with icons. Every time one tab is clicked, the icons disappear for a brief amount of time, then appear again. It’s very fast, almost unnoticeable, but a little bit annoying. If we remove the icons, the Tabsheet works fine. We have tested in Firefox and Chrome.

We don’t know wether it’s a bug or there is some workaround we could use to solve this.

Thank you in advance.

2

Can you reproduce it using
http://test.vaadin.com/7.2.0/run/TabSheetIcons?restartApplication&debug
 ?

Does it only occur in 7.2 and not in 7.1?

It could be an issue related to the refactoring of TabSheet or introduction of font icons to 7.2

3

After some research I’ve found out this.

It happens only with Chameleon theme. It runs ok with Reindeer theme. We have a customized theme that imports chameleon stylesheet.

Here is an example.
Reindeer Theme
http://217.160.208.195:8080/tabr/vaadin/

Chameleon Theme
http://217.160.208.195:8080/tabc/vaadin/

I’ve removed all the customizations in these examples

Here is the source code of the main component.

package com.visual_limes.tab;

import com.vaadin.server.ThemeResource;
import com.vaadin.ui.Button;
import com.vaadin.ui.Component;
import com.vaadin.ui.HorizontalLayout;
import com.vaadin.ui.Label;
import com.vaadin.ui.TabSheet;
import com.vaadin.ui.VerticalLayout;

public class Tab extends VerticalLayout {
  private TabSheet tab;

  public static final ThemeResource TAB = {
    new ThemeResource("icons/arbol/page.png"),
    new ThemeResource("icons/arbol/page2.png"),
    new ThemeResource("icons/arbol/unsortedlist1.png"),
    new ThemeResource("icons/arbol/view_detailed.png"),
    new ThemeResource("icons/arbol/view_right_p.png")
  };

  public Tab() {
    setMargin(true);
    setSpacing(true);
    setSizeFull();
    HorizontalLayout hl = new HorizontalLayout();
    hl.setSizeFull();
    hl.setHeight("40px");
    addComponent(hl);
    setExpandRatio(hl, 0);
    Label l = new Label("Icon tabs example");
    l.setSizeFull();
    hl.addComponent(l);
    hl.setExpandRatio(l, 1);
    Button b = new Button("Previous");
    b.addClickListener(new Button.ClickListener() {
      @Override
      public void buttonClick(Button.ClickEvent event) {
        Component co = tab.getSelectedTab();
        int idx = tab.getTabPosition(tab.getTab(co));
        idx = (idx-1+TAB.length) % TAB.length;
        tab.setSelectedTab(idx);
      }
    });
    hl.addComponent(b);
    hl.setExpandRatio(b, 0);
    b = new Button("Next");
    b.addClickListener(new Button.ClickListener() {
      @Override
      public void buttonClick(Button.ClickEvent event) {
        Component co = tab.getSelectedTab();
        int idx = tab.getTabPosition(tab.getTab(co));
        idx = (idx+1) % TAB.length;
        tab.setSelectedTab(idx);
      }
    });
    hl.addComponent(b);
    hl.setExpandRatio(b, 0);
    tab = new TabSheet();
    tab.setSizeFull();
    addComponent(tab);
    setExpandRatio(tab, 1);
    for (int i = 0; i < TAB.length; i++) {
      hl = new HorizontalLayout();
      hl.setMargin(true);
      hl.setSpacing(true);
      hl.setSizeFull();
      l = new Label("Some content in tab " + (i+1));
      l.setSizeFull();
      hl.addComponent(l);
      tab.addComponent(hl);
      tab.getTab(i).setIcon(TAB[i]
);
      tab.getTab(i).setCaption("Tab number " + (i+1));
    }
  }
}
[/i]

[i]

[/i]

4

I finally found a workaround to solve this. We added some customization to our css.

[code]
@import url(…/chameleon/legacy-styles.css);

.v-tabsheet-tabs .v-icon {
height: 16px !important;
width: 16px !important;
}

…
[/code]This css code is extracted from reindeer style wich worked fine with icons in tabs. Of course if you use tabs with bigger icons you should change it to fit.

This works in the version we are currently testing: 7.2.1.