Button with icon has incorrect rendering behavior


I have been using Vaadin for more than two months, basically I’m very satisfied with its quality and flexibility.

The issue I have is about the button with icon.
In order to describe the problem clearly, I have made a video. Please watch it by the following link:


Basically when you click “Advanced”, a form is displayed, and the form has footer which has two buttons.
The buttons have their icons.
The button is rendered in the incorrect size in the first place, but after a short while, it became correct.
But the user can see this strange behavior which is annoying.

Best wishes,

Sorry to say, but this is a ‘feature’ of Vaadin itself that stems from an IE6 compatibility issue; the icon is firstly rendered as 0x0 pixels, and is shortly afterwards re-sized to its proper size. Unfortunately there is nothing that can be done about this in Vaadin 6.

Hi Thomas,

Thanks for the answer.
Now I understand why this strange behavior exists.

Best wishes,

Hi Thomas,

We have decided to drop support for IE6/7, is it possible to fix this behavior in latest Vaadin framework (we are using 6.7.4
Or could you give me some idea to do this in the simple way?

Best wishes,

It won’t be fixed in any official release of Vaadin 6, since we still need to support IE6. I have flagged this message to our dev team, lets see if they have a simple workaround…

Thanks-_-, a simple workaround is enough for me.
Please let me informed.

If the icon size is known you can try forcing it by CSS :

.v-button .v-button-wrap>.v-icon{

The CSS trick is working perfectly!:slight_smile: