How to force bootstrap dropdown over iframe in IE10

Question

I have a simple test I am running on Bootstrap and discovered an issue that only occurs in IE10.

If you have a dropdown and a iframe below it, the dropdown when clicked aligns below the iframe. I have an example here

I have tried z-index a million different ways. I have tested in all browsers and only IE10 appears to have the issue.

while I know IE10 isn't on ever Windows machine yet, its coming and I don't want menus failing... any ideas?

score 2 · Answer 1 · answered Mar 29 '13 at 23:50

2

As referenced here. It might be worth a shot.

$(document).ready(function () {
    $('iframe').each(function(){
        var url = $(this).attr("src");
        $(this).attr("src",url+"?wmode=transparent");
    });
});

Also, I think you would need to add style="position:relative;" to the iframe to achieve z-index.

answered Mar 29 '13 at 23:50

Denny Smith

113
1
10

I'll double check the position. But the ?wmode is being added by the media plugin – TJ Sherrill Mar 30 '13 at 03:24
checked and that appears to not resolve the issue – TJ Sherrill Apr 01 '13 at 17:46

score 0 · Answer 2 · edited May 23 '17 at 12:16

0

Try this one.. It worked for me. Check in your situation.

Bootstrap 3 navbar on pages containing iframes

It suggests to use "the complete closing statement."

<iframe frameBorder="0", width="100%", height="500", id=generic src="generic_order.html"></iframe>

edited May 23 '17 at 12:16

Community

1
1

answered May 10 '16 at 08:56

Tejasvi Hegde

2,694
28
20

How to force bootstrap dropdown over iframe in IE10

2 Answers2