Randomly missing tabsheet icons

Vaadin 6 / 7 / 8 Framework UI
1

Hello,

Every so often, I load my application some or all of the tabsheet icons from the tabsheet are missing. The odd thing is that this happens maybe once every 1-2 war deployments, and the way to fix it has been to log out of my application and re-login and the icons appear again.

Has this happened to anybody else?

I am using IE7 and IT Mill Toolkit RC10. I’ve been trying to recreate this issue in Firefox, but it’s not occurring. Unfortunately I need my application to work with only IE7.

Thanks,
Ajay

2

I’ve been able to identify another example of where this is happening and this time it is happening consistently.

In my application, I have a button (say ‘button A’) which creates three child windows and in two of those child windows there is a tabsheet with icons. If I was to click ‘button A’ for the first time (since deployment of the app) the icons will appear as follows:

If I then close these child windows, and click on ‘button A’ any more times, the icons for the tabsheet are gone. This is happening consistently:

This again is not happening with Firefox, only with IE7.

Thanks,
Ajay

3

I’ve gotten further with this one. I was able to find a tool much like “Firebug” for IE7 called “IE Developer Toolbar”.

Using this toolbar, I was able to read the css when some of the icons are showing and some aren’t. It appears that when the icon’s do not show up, the css shows that the i-icon width and height are explicitly set to 0px. In the case where the icon’s do show up, no width or height is set for the i-icon. If I manually modify this i-icon width and height to 16px by 16px, the i-caption is cut off because the width of the i-caption (which includes the icon) seems to be incorrectly calculated since it used the 0px width/height.

I’ll log a ticket for this one.

4

For anybody having the same issue, I have been able to temporarily resolve the issue using the following css code (I’m using custom tabsheet images, so you would need to modify the width appropriately):

  • html .i-tabsheet-tabitem-selected .i-caption {
    width: 100px !important;
    }
    *+html .i-tabsheet-tabitem-selected .i-caption {
    width: 100px !important;
    }

  • html .i-tabsheet-tabitem .i-caption {
    width: 100px !important;
    }
    *+html .i-tabsheet-tabitem .i-caption {
    width: 100px !important;
    }

  • html .i-tabsheet-tabitem-selected .i-icon {
    width: 16px !important;
    height: 16px !important;
    }
    *+html .i-tabsheet-tabitem-selected .i-caption .i-icon {
    width: 16px !important;
    height: 16px !important;
    }

  • html .i-tabsheet-tabitem .i-caption .i-icon {
    width: 16px !important;
    height: 16px !important;
    }
    *+html .i-tabsheet-tabitem .i-caption .i-icon {
    width: 16px !important;
    height: 16px !important;
    }

Regards,
Ajay

5

Hi Ajay,

This seems to be a timing issue in IE where an onload event for an icon is fired before we are ready to catch it. I added a patch for this, please try the next nightly or 5.3.0RC11 (when available) to see if it fixes your problem.

6

Will do. Thanks Artur!