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?
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.
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.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With