Bootstrap 3 Dropdown on iPad not working

Question

I have a simple Bootstrap 3 dropdown that is working in all browsers that I've tested (Chrome, FF, IE, Chrome on Android) but it is not working in Safari or Chrome on the iPad (ios 7.04).

I thought this was an issue with the ontouchstart as suggested in some other posts dealing with Bootstrap 2 but I've tried that with a local file and have had no success: Bootstrap Collapsed Menu Links Not Working on Mobile Devices

I also don't want a solution where I have to modify the original javascript file since we're currently pulling that from a CDN.

I created a simple snippet here to test: https://www.bootply.com/Bdzlt3G36C

Here's the original code that's in the bootply in case that link dies in the future:

<div class="col-sm-5 col-offset-2 top-buffer">
  <div class="dropdown">
      <a class="dropdown-toggle" id="ddAction" data-toggle="dropdown">
        Action
    </a>
    <ul class=" dropdown-menu" =""="" role="menu" aria-labelledby="ddaction">
      <li role="presentation"><a class="dropdown-toggle" id="ddAction" data-toggle="dropdown>
        Action
    </a>
    <ul class=" dropdown-menu"="" role="menu" aria-labelledby="ddaction">
        </a><a role="menuitem" tabindex="-1" href="http://www.google.com">Open Google</a>
      </li>

  </ul></div>
</div>

Solution 1

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

Solution 2

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

Solution 3

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;
}

Solution 4

You can also add a class to your a tag called clickable. This is a bootstrap class. It sets the css cursor: pointer.

<a class="clickable"></a>

Solution 5

I just had this issue - where the Bootstrap 3 navbar dropdown menu was not opening on an iPad mini 2 (but worked on an iPhone 7 and various desktops/laptops). After debugging directly on the iPad, I discovered the problem was using 'let' instead of 'var' inside a js function. Once I switched the 'let's to 'var's, everything was good to go. Just wanted to add this here in case it (or removing a similar obsolete feature) proves to be a fix for someone else too!

View more solutions

Comments

[Pinguin Dirk]

By the way, I added some button classes (btn btn-sm) - worked for me (and I don't have to use a link with potential side-effects, such as scrolling)

[Yacoub Oweis]

This makes no sense at all but it fixed the issue.. iOS debugging is Fun! full of surprises :)

[Dan Bradbury]

yeah.. i literally cant believe this fixed my issues. browsers are insane.

[Christopher Stevens]

This saved the day. I see a lot of examples out there that omit the href="#" and that carried over on the latest project. Thanks for posting!

[Zachary Weixelbaum]

This was a life saver, same as @ChristopherStevens that the tutorial never had the href

[eric]

This is a problem in Bootstrap4 with iPhoneX/Safari 11 as well. Adding the href="#" still works!

[Matthew Lock]

I found it was enough to have href="" though my <a> had angularjs ng-clicks in them

[Alexander Wigmore]

Very odd—but this also fixed an issue I was having on a third-party Wordpress theme for a bootstrap menu, simply adding 'cusor:pointer' made iPhone's respond to the click on a hamburger menu for some reason. Thanks Mark!

[Tomen]

this saved my life