Bootstrap 3 Dropdown on iPad not working
I figured it out. I was missing the href="#" in my anchor tag. It was working fine in other browsers but not chrome or safari on IOS. Works fine now. Here's the final code for anyone that's interested:
<div class="dropdown">
<a class="dropdown-toggle" id="ddAction" data-toggle="dropdown" href="#">
Action
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="ddaction">
<li role="presentation">
<a role="menuitem" tabindex="-1" href="http://www.google.com">Open Google</a>
</li>
</ul>
</div>
And a working sample here: http://www.bootply.com/104147
safari versions we tested on iOS do not interpret z-index initial correctly. Increase the z-index on dropdown-menu. Instead of clicking on the item, it is hidden and the menu closes. To make Safari work we needed to override bootstrap z-index: initial.
.dropdown-menu {
z-index: 25000 !important;
}
If you don't want to use an <a>
tag, or add a redundant href attribute, you can just apply cursor:pointer
css to the element, and it will work