Kendo window hidden by IE 11 PDF viewer in an iframe?

Question

I have a page that contains an iframe . iframe is used to display the pdf document from amazon s3. Basically i set the src property of iframe to s3 link. Works fine!!.

  <iframe class="mt-iframe" src="http://xxxx.amazonaws.com/12345454.pdf"></i 
frame>

Now i added a button on the same page, the click event of the button is wired-up to open a kendo window popup.

When i click, the window opens but its hidden behind the pdf document. ( and looks like it only happening with pdf document in IE. In Google Chrome & MS Edge it works fine) Somehow, i think* , the default pdf viewer in IE is messing it up. I've tried setting the z-index on both the iframe and the popup, but with no luck.

So to temporarily solve this issue i'm currently hiding iframe when window opens; and show when window closes. But this is not good user experience.

What are my options here?

I am only targeting IE11, chrome and MS edge browser.

Answer 1

Try setting wmode="transparent" on your iframe, like this:

<iframe class="mt-iframe" wmode="transparent" src="http://xxxx.amazonaws.com/12345454.pdf"></i 
frame>

Take a look at this for more info: http://www.stampede-design.com/blog/2011/06/dropdown-menu-hiding-behind/#.WPHtnNKGMYt