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

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("" ); 
});
   

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