Jquery combobox behind inline object (IE only)

Question

In Internet Explorer, I have a jquery combobox that opens behind an inline object (like a pdf document). How can I make sure combobox is always in front of an inline object?

See this script for an example: http://jsfiddle.net/RDd3A/258/ (updated script containing my attempts to solve it)

HTML:

<select id="combobox"> <option value="">Select one...</option> <option value="23">Really long stuff that might wrap</option> <option value="25">Normal Stuff</option> </select> <br/> <embed src="https://www.xs4all.nl/media/transparantie/Transparantierapport-2012.pdf"/> 

Javascript:

 $("#combobox").combobox(); 

(I stripped all the css)

I have already tried the following:

• Use wmode = "transparentant" as an attribute
• Use? wmode = transparent in url
• Use iframe
• Use z-index

Unfortunately this does not help, combobox is still behind the embedded document. Is anyone

Answer 1

This is a well-known IE problem, I have been investigating several times, and the only way I know is already mentioned by @Gyum Fox is another iframe mask. However, you do not need to place the iframe “between” the elements - you can place an absolutely positioned iframe inside the corresponding element with 100% height and width . CSS iframe to fit inside an element:

 iframe.ie-fix { position: absolute; border: none; top: 0; left: 0; height: 100%; width: 100%; z-index: -1; } 

The problem is that jQuery dynamically constructs the contents of the menu, so we need to handle some events to insert a mask. This simple code adds a mask to all the menus on the page. Not a complete solution, however, the approach shows:

 $('.ui-button').click(function() { $('.ui-menu').append("<iframe class='ie-fix' src='about:blank'></iframe>" ); }); 

Ideally, we only need to update the corresponding menu, but I need to dig deeper into jQuery sources, to do this, try contacting later.

JS Fiddle with a complete example

Answer 2

This is an IE issue. I had a similar problem using combobox inside a modal dialog in a jQuery user interface. Combobox works great in Chrome or Firefox. The only way to solve this problem is to place it inside the iframe . I worked for me in a modal dialogue.

IE and jQuery seem to work perfectly together if you are not doing anything unusual. I also tried to place the s select box in a modal dialog, and it didn't work either. I avoid using two jQuery interface elements when they should be nested.

Since udmik answered first, you should use its implementation.