Select box position issues in chrome

Question

I have an issue with select box in Chrome. I have three select boxes, where the value of the second select box depends on the first and the value of the third depends on the second.

I have shown an error <div> when there is no option in the select box and the user tries to open it. The error <div> comes at the top of the three <div> s and disappears when the user clicks on any portion of the body.

My issue is that the option list detaches from the select box when run in Chrome, as the error <div> hides on clicking the select box (which is also part of the body).

Answer 1

You can try position:absolute; on the error element and use eg top:-40px;left:0; to push it up. Remember that the element surrounding the error code need position:relative; (to define the "zero-position" of the absolute element). The surrounding element (with position:relative; ) must not be one of the "disappearing" elements.

The error code will be shown on top of some other stuff. With the top:value you can place it where it is most suited.