NativeSelect Validation Popup Display Bug

I'm using a native select with form validation. When there is a validation error, the error popup appears behind the drop down in the select to the lower right of the mouse pointer. This causes the popup to be partially hidden by the drop down content which is confusing to users.

The problem appears in both Chrome and FireFox, however FireFox appears to trigger the mouse-over event for the entire drop down, not just the closed combobox widget, so the issue is much more noticeable. I captured some screenshots of the issue here:
https://www.dropbox.com/sh/j2m5ud9fr55t3w4/_Qh1utzIyS

This looks like it is related to an old bug http://dev.vaadin.com/ticket/1663 where a decision was made to put the error popup at the mouse point rather than next to the component.

I'm using:
Vaadin 6.8.0
Chrome 19.0.1084.56
FireFox 13.0.1

Any suggestions on improving the popup rendering/location? Is this something I should file an official bug report for?

Thanks,
-mike

The order in which elements i rendered on top of each others are defined with the css rule z-index. Basically the item with the highest z-index will be on top. You can look with Chrome's inspector or Firefox's Firebug to see what the dropdown's and tooltip's z-index is, and try to modify them inside the inspector to see if it fixes your issue. Then it is just a theme fix (that should be also fixed in Vaadin).

The bad side with this is that NativeSelect, as the name says, is a native component rendering that the browser provides. It might be that the browser decides to ignore css rules on something that it should control.

I tried playing around with the z-order with no success. In fact the default z-order in the Chameleon theme for a popup is 20000.

I did some more Googling and found this info:

"The <select> element is an interactive content element in HTML5 and a menu in HTML4.01. As such it is an object which requires user input and behaves like a right click context menu and is rendered above all document elements if active. Try it for yourself - open your contextmenu and hover over the navigation.

This bug is connected to the behavior of other interactive content elements such as video (see also HTML5 rendering)."

http://stackoverflow.com/questions/9210725/html-select-drop-down-option-z-index

So I think you're right that I may be stuck because of the native select. It would be nice if I could disable, relocate, or hide the popup easily but from what I've seen in the forums that may have to wait until Vaadin 7.

-mike

The standard ComboBox does not fit well with your design? It doesn't use the browser's native dropdown.