Unresponsive buttons to mouse clicks on IE 9

Hi everyone,

This is a strange case. My hierarchy of layouts is fairly light, i.e., VerticalLayout > HorizontalLayout > VerticalLayout > HorizontalLayout > {some plain vanilla buttons} and the buttons behave correctly on all browsers but IE, which is driving me nuts. The buttons do get rendered on IE but mouse clicks remain without effect. Also, the cursor doesn’t change to the standard pointer one upon hovering.

Hitting F5 does fix the problem.

However, the buttons do work when tab-navigating to them and hitting the space bar.

Also, the buttons will sometimes react to mouse clicks again after randomly poking a little with the rest of the UI and trying them again. I couldn’t find a more deterministic behavior.

Any help would be very much appreciated. I am using Vaadin 7.0.6.


Sounds like a critical client side issue. Adding “?debug” query parameter will most probably reveal some JavaScript exeptions. Please post a ticket to dev.vaadin.com and attach a small application in which this can be reproduced.


Hi Matti,
Thanks. From what I could observe, the buttons work correctly half the time, ie., without hitting refresh.
I’ll see what I can learn using the debug mode and will advise accordingly.

?debug showed nothing as no JS exception was ever thrown.

Ultimately, it seems that tweaking with css was the reason. The innermost HorizontalLayout had a TextField and four buttons (in that order). The TextField had its width set by css to 100% and received an expand ratio of 1 in the HorizontalLayout. The buttons were left untouched so that the TextField stretches to the maximum.

Removing the 100% width in the css and setting this in the code fixed the problem on IE.