Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to force bootstrap dropdown over iframe in IE10 [duplicate]

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?

like image 498
TJ Sherrill Avatar asked Mar 29 '13 23:03

TJ Sherrill


People also ask

Why is dropdown not working in bootstrap?

Why is my drop down menu not working in bootstrap? Solution : The dropdown should be toggled via data attributes or using javascript. In the above program, we have forgotten to add a data attribute so the dropdown is not working. So add data-bs-toggle="dropdown" to toggle the dropdown.

How to use dropdown menu in Bootstrap?

To open the dropdown menu, use a button or a link with a class of . dropdown-toggle and the data-toggle="dropdown" attribute. The . caret class creates a caret arrow icon (), which indicates that the button is a dropdown.

What is drop down menu in bootstrap?

Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They're made interactive with the included Bootstrap dropdown JavaScript plugin. They're toggled by clicking, not by hovering; this is an intentional design decision.


1 Answers

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.

like image 102
Denny Smith Avatar answered Sep 30 '22 13:09

Denny Smith