30

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>
1
  • 3
    This is a good question. It shouldn't have been closed: it can be reproduced and it's hardly a typo. This is a tricky problem with all kinds of posts, but the code is a concise example, the question included things he tried already, and the answers cover several possible solutions.
    – goodeye
    Feb 9, 2019 at 2:13

6 Answers 6

74

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

4
  • 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) Mar 2, 2015 at 17:44
  • 1
    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! Dec 3, 2016 at 17:48
  • This is a problem in Bootstrap4 with iPhoneX/Safari 11 as well. Adding the href="#" still works!
    – eric
    Feb 13, 2018 at 20:43
  • I found it was enough to have href="" though my <a> had angularjs ng-clicks in them Apr 1, 2018 at 4:03
26

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

3
  • 8
    This makes no sense at all but it fixed the issue.. iOS debugging is Fun! full of surprises :) Oct 22, 2015 at 11:57
  • yeah.. i literally cant believe this fixed my issues. browsers are insane. May 28, 2016 at 8:22
  • 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! Jun 16, 2018 at 10:52
7

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

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>
1

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!

0

bootstrap target toggle was not working for me on iPhone/iPad WebKit. I ended up to toggle show class manually when clicked on the dropdown container

  $scope.showDropdown = function(dropdownManuId) {
    var element = document.getElementById(dropdownManuId);
    if( element.classList.contains("show") ) {
      element.classList.remove("show");
    } else {
      element.classList.add("show");
      element.focus();
      element.scrollIntoView();
    }
  };

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.