jquery combobox behind embedded object (IE only)

Question

In Internet Explorer, I have a jquery combobox which opens behind an embedded object (for example a pdf document). How can I make sure the combobox is always in front of the emb

Answer 1

This is an IE issue. I had a similar problem using a combobox inside a modal dialog in JQuery UI. The combobox would work fine in Chrome or Firefox. The only way I found to resolve that issue is to place it inside an iframe. I worked for me in the modal dialog.

IE and JQuery seem to work fine together as long as you don't do anything too fancy. I also tried placing a s select box in a modal dialog and it didn't work either. I avoid using two JQuery UI elements when they must be nested.

Since udalmik answered first, you should use his implementation.

Answer 2

It is a known IE issue, I did an investigation some time ago and the only way I know is already mentioned by @Gyum Fox - another 'mask' iframe. However you don't have to put an iframe "between" the elements - you can put absolutely positioned iframe inside corresponding element with 100% height and width. CSS of an iframe to be placed inside of the element:

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

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

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

Ideally we need to update only corresponding menu, butI need to dig deeper into jQuery's sources to accomplish that, will try to address later.

JS Fiddle with complete example