Button dropdown links don't work on mobile (android, iOS)

[MikiMullor]

I have simple dropdown buttons we built with 2.04

links are A tags, proper quotes, href='#'

Used to work fine.

Upgraded today to 2.1 and the links in any dropdown button don't work. The dropdown menu opens, but clicking on a link closes the menu without any action. tested on Android 2.3 and iOS 5

Rolledback to 2.04 and everything works again. Anyone else has this issue?

[tonybruess]

That jsfiddle works fine on my iOS6 iPad.

On Nov 9, 2012, at 6:54 AM, Mitchel notifications@github.com wrote:

@accidental https://github.com/accidental I replaced "#" with " http://www.google.com" and that does not work on my iPhone: http://jsfiddle.net/cmR5b/1/

— Reply to this email directly or view it on GitHubhttps://github.com/twitter/bootstrap/issues/4550#issuecomment-10225485.

[petergerard]

@verschoof yes, oddly neither top or bottom menu items are working on the iphone in that example. But when I use the same code in production on my website and it works fine on iphone. I'm new to jsfiddle so maybe I set something up incorrectly..

[brianfeister]

Experiencing the same issue on my end. iOS 5.1. Thought I was being smart by doing

$('a.dropdown-toggle, .dropdown-menu, .dropdown-menu a, .dropdown-menu .dropdown-submenu a').on('touchstart.dropdown.data-api', function (e) {
        e.stopPropagation();
});

Which attempts to stopPropagation() on .dropdown-menu .dropdown-submenu a to fix the 2nd tier navigation as well but that doesn't work here either. Did anyone find a fix for the L2 .dropdown-submenu a's not working?

[ZetIsDeadBaby]

@accidental jsfiddle did not work on iOS6 iPad 2 and Samsung S2, but also simple links did not work, so we have put up simple demo

http://goo.gl/Zsyrv

1. Bootstrap 2.1.1 with @dieselcz fix - works fine
2. Bootstrap 2.2.1 - does not work
3. Bootstrap 2.2.1 with @brianfeister fix - works fine

[petergerard]

Yes, my jsfiddle didn't work, I probably did something wrong with the setup. You can try on my site here: http://distrify.com (click My Account on the top-right) Works fine on every device I've managed to test on. The example on that page is a menu drop-down, I use the button-dropdown elsewhere in the app and it also seems to work fine.

[marcospassos]

Not working on Android 2.3.3.

[fender]

For anyone looking for a quick fix before this issue is closed, I just added CSS to force the menus to be open in mobile.

@media (max-width: 980px) {
  .dropdown ul.dropdown-menu {
    display: block;
  }
}

[websafe]

Please take a look here: https://github.com/twitter/bootstrap/issues/5900#issuecomment-10398454 This could be a solution for this issue too? IMVHO #5900 is a duplicate.

[stpe]

Experiencing same issue in Google Chrome Desktop if Emulate touch events are enabled in Developer Tools. Just teared my hair out debugging until realising this.

[guyisra]

still relevant..

[terrencelui]

Still an issue. On the latest released version of Bootstrap but still seeing this issue on iPad, iPhone, and a couple of Android devices. Tried some of the suggestions in the thread and got it to somewhat work on android devices but not on iOS.

http://sidelineseer.com is my site.

You can see the behavior in the header dropdowns at the top like "league"

[paulbjensen]

Can confirm is an issue on the iPad mini.

[marcospassos]

Same issue on the Samsung Galaxy I

[koops]

+1

[andrewufl]

+1

[holly73]

+1

Just signed up here to leave this +1, as I can't believe nobody fixes this error. The solution above didn't work for me. Well, it worked on one of my Bootstrap projects, but not on the second. And I don't know why.

The funny thing is: even the dropdown on their Hero demo doesn't work on iPads.

[terrencelui]

For those who really need a workaround for this, the best solution I found was just to revert back to an older version. I went back to 2.0.4 and things work fine. So long as you don't need any of the most recent features this seems to be the best way to go about it as not working on mobile is just a non-starter for me as I'm sure it is for most of you.

[csthsl]

Sorry to hear that. I have it working in my latest project. Take a look.

http://highlandstaketrek.org/info/

The dropdown is in the "What To Wear" tab. Works on my iTouch, iPad and Droid phone. It didn't before the fix.

Good luck.

On Nov 22, 2012 11:47 AM, "holly73" notifications@github.com wrote:

+1

Just signed up here to leave this +1, as I can't believe nobody fixes this error. The solution above didn't work for me. Well, it worked on one of my Bootstrap projects, but not on the second. And I don't know why.

The funny thing is: even the dropdown on their Hero demo doesn't work on iPads.

— Reply to this email directly or view it on GitHub.

[prinum]

A quick fix with 2.2.0 is the following.

$('body').on('touchstart.dropdown', '.dropdown-menu', function (e) { 
  e.stopPropagation(); 
});
$(document).on('click','.dropdown-menu a',function(){
  document.location = $(this).attr('href');
});

[verschoof]

@prinum Thanks, this works for me: http://jsfiddle.net/PJpjA/10/

[winterstetter]

@prinum How and where exactly do I impement this fix?

[holly73]

@prinum: Thanks, also works for me now. Seems like your second line made the difference, as I had the first line already there and it didn't work.

@thomaswinterstetter: I just included it in the footer after the included js files

<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.min.js"></script>

    <script>
      !function ($) {
        $(function(){
          // Fix for dropdowns on mobile devices
          $('body').on('touchstart.dropdown', '.dropdown-menu', function (e) { 
              e.stopPropagation(); 
          });
          $(document).on('click','.dropdown-menu a',function(){
              document.location = $(this).attr('href');
          });
        })
      }(window.jQuery)
    </script>
  </body>
</html>

[winterstetter]

Excellent, tk you @holly73

[IwanUswak]

:+1:

[constantm]

@holly73 Awesome thanks!

[tierra]

The fix by @prinum doesn't appear to work in the Android 4.2 browser.

[jokull]

Anyone know if FastClick could solve this?

[jeffehobbs]

Even after adding the code from @prinum I am still seeing an issue with submenus on iOS.

[andrejmlinarevic]

@brianfeister Your solution works on Kindle Fire.

[data-enhanced]

This solution from @blakeembrey above is doing the trick for me. I've added this line after bootstrap's js:

$('body').on('touchstart.dropdown', '.dropdown-menu', function (e) { e.stopPropagation(); });

[jwilson]

This builds off of the code from @holly73 but it isn't perfect, my submenu items cause the browser to attempt to double load the page, but only once (the url changes before the page has a chance to start loading).

$('body').on('touchstart.dropdown', '.dropdown-menu', function (e) {
    e.stopPropagation();
});
$('body').on('touchstart.dropdown-submenu', '.dropdown-menu a.stop', function (e) {
    e.preventDefault();
});
$(document).on('click', '.dropdown-menu a.go', function () {
    document.location = $(this).attr('href');
});

I added "stop" classes to the anchor tag for the submenu title and added "go" classes to the submenu item links.

<li class="dropdown-submenu">
    <a tabindex="-1" href="#" class="stop">Users</a>
    <ul class="dropdown-menu">
        <li><a tabindex="-1" href="/Account/Create/" class="go">Create</a></li>
        <li><a tabindex="-1" href="/Account/" class="go">Edit</a></li>
        <li class="divider"></li>
        <li><a tabindex="-1" href="/Account/Permissions/" class="go">Report Permissions</a></li>
    </ul>
</li>

Seems to work somewhat ok except for the page loading issue, but it at least lets me select a submenu item. This is for iOS 6 on an iPad.

[verschoof]

@jwilson I'm running iOS-simulator to test your code, but your code is not working in the simulator.

[splondike]

I fixed this by just removing the touchstart event handlers at the bottom of bootstrap-dropdown.js. The issue seems to be that the user's tap calls the toggle code twice (first for touchstart, then for click), which of course closes the menu. The commit which added these capabilities was c9cef741f6d97bb8549af8e4809fccce4339f2f4, in my opinion it should just be reverted.

If you wanted to keep using the touchstart event so that the menu opened faster you could check for touch event capability the way tap.js does it: https://github.com/alexgibson/tap.js/blob/master/tap.js

Personally I think if you want fast clicks, you should just use fastclick.js which attempts to transparently make the click event instant.

[antonmedv]

Come on! FIX it!

[martent]

Same thing for dropdowns in the navbar using the example code in the docs. At least in the master branch.

[tonybruess]

I think I speak for everyone when I say, THANK YOU!

[tkawa]

@mdo thanks!

[jduprey]

THANKS!!

[onlineyouthmanager]

This appears to still be broken on android - running the stock browser at android 4.2.1. Works on iOS though.

[Bossa573]

works perfectly on chrome@iOS 4.3.3, both stock browser and chrome@android 4.2.1

[rfc1459]

+1, no problem whatsoever with 2.2.2 on both the stock Android browser and Chrome for Android.

@ejellard: try to flush the cache of the stock browser from the system preferences, sometimes its caching policy is a little "overzealous"

[onlineyouthmanager]

@rfc1459 Thanks - I did try that, and also on a phone that has never gone to the bootstrap examples page - both still not working completely as expected. One phone is Android 4.2, one is Android 4.2.1 (both Samsung Galaxy Nexus).

If you hold the drop-down for half a second or so it does open and behave as normal. If you tap it, it opens and immediately shuts.

[punknroll]

same probleme here: https://github.com/twitter/bootstrap/issues/6221 . i created a jsfiddle for that:

http://jsfiddle.net/punknroll/d5KXF/

[mival]

@danielfranz Thanks, looks like that your solution works

[RusAlex]

Current master branch has temporary fix for this bug. Use last version of master branch.

On Thu, Dec 13, 2012 at 10:37:57PM -0800, mival wrote:

@danielfranz Thanks, looks like that your solution works

---

Reply to this email directly or view it on GitHub: https://github.com/twitter/bootstrap/issues/4550#issuecomment-11366657

[draxtor]

It doesn't work for me. I have android 4.1 tablet. I've downloaded the latest version from master branch and cleared cache. Also I've implemented @danielfranz hack. In default browser I can't control dropdown everything is flying away from me when I touch the menu. In chrome first level of dropdowns are working, but second level dropdowns are not (when I click on the submenu thet pops out another submenu all menus desapear). Only if I'm holding submenu menu item for a few seconds it's child submenu pops out and I can click on link. But If I do so, chrome opens it's menu and asks me if I want to open link in new tab or not.

[phaseOne]

I think there's a better fix than all of this JS. Simply give the a elements this CSS attribute:

cursor: pointer;

Done. Fixed the issue I was having with nav-box collapsable sections. The fix seems odd, but it works.

[robhadfield]

@danielfranz Bingo! Saved my skin :)

10 internet points to you.

[phallguy]

+1

[barmstrong]

For some reasons 2.2.2 still didn't solve this for me.

Am using @drupaljoe 's solution with CSS to keep it always open for now on mobile: https://github.com/twitter/bootstrap/issues/4550#issuecomment-10398831

Thanks!