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?

[Stefac]

Same problem here for me. Menu opens, but clicking simply close it.
Tested on iPad IOS 5.1

[jwilson]

Would like to add that the dropdown menus from a navbar do work on a iPad (iOS 6), but like the other 2 posters they are not working on a dropdown button.

[dpwolf]

A quick hack to prevent the dropdown menu from being cleared on touch devices:

on line 143 of bootstrap-dropdown.js replace

.on('click.dropdown.data-api touchstart.dropdown.data-api', clearMenus)

with

.on('click.dropdown.data-api', clearMenus)

You won't be able to tap outside the menu to close it, but the dropdown links will work.

[ShivX]

+1

Looking forward to the fix in 2.1.1

[fat]

Hey @MikiMullor,

Thanks for opening this issue! Unfortunately, it looks like it fails to pass the criteria neccessary for submitting to bootstrap. The following things are currently failing:

• should include a jsfiddle/jsbin illustrating the problem if tagged with js but not a feature

For a full list of issue filing guidelines, please refer to the bootstrap issue filing guidelines.

thanks!

[ShivX]

@fat

This seems counter-productive. The issue can be repeated on the bootstrap sample page, and it's pretty critical that Bootstrap button dropdown links don't work on touch devices! :-/

If it means getting it fixed in 2.1.1, Here's a JSFiddle

[dpwolf]

@ShivX thanks!

[Zylinderkatze]

+1 here.

Looking forward to the fix. Any foreseeable release date for it?

 
Edit: For those interested, this is my little "workaround" that seems to work, add it after the "bootstrap-dropdown.js" include (I put mine in the $(function() { } section which is located at the end of the page in my case):

$('a.dropdown-toggle').on('touchstart', function(e) {
      // do your stuff here
})

[Starefossen]

Still an issue in 2.1.1. Demo can be found in gh-pages.

[babrewer]

Have also tested with 2.1.1. Dropdown menu links do not work on IOS devices running 5.1.1. They work fine when using RWD Bookmarklet or responsive.is for testing, just not natively on IOS devices.

[mikegreiling]

I'm having this issue too. Very much interested in a fix.

[dcorb]

Having the issue in Chrome Desktop with v.2.1.1
@dpwolf solution worked for us (aka removing touchstart event in that line).

The problem is that both events 'click' and 'touchstart' are triggered.
First "touchstart" event and then, 300 ms later comes up the 'click' event .. so clearMenu is called twice.

Probably I'm wrong.. but it's like the browser doesn't have time to handle the 'a' link as normally because touchstart already cleared the menus.

Is there any other solution than treat those 2 event types separetly ?
More info https://developers.google.com/mobile/articles/fast_buttons?hl=de-DE

[patrickoehlinger]

Same problem for me with Bootstrap 2.1.1 on iOS 6 :-(

[tonybruess]

I'm experiencing this issue as well :(

[thezoggy]

Pull #4812 looks to address this

[thoughtshop]

Pull #4812 didn't fix dropdown links on iOS for me. It seems the default event is still being prevented.

[crag]

Also have this problem on IOS 6.

[blakeembrey]

I'll fix this up in my PR later today. Shouldn't require too much of a change to get this working as expected.

[stevecoug]

I seem to have a better workaround by adding this line after the line dpwolf mentioned, rather than changing the line:

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

I haven't noticed any side effects so far.

[blakeembrey]

@fridgesm Pretty much the same thing I did for my fix in #5067 - However you should bind it to the body otherwise it won't get triggered on any dropdowns after you call that line. Should be a better solution to this, just can't think of on right now

[tetherit]

Added this to my bootstrap_custom.js.coffee file in app/assets/javascript:

  $('.dropdown-menu').on('touchstart.dropdown.data-api', (e) ->
    e.stopPropagation() )

Dropdown menu items now work on iOS :D - Thank you fridgesm for suggesting this.

[ercchy]

well my solution was to add class dropdown to the parent tag on HTML markup. If you have access to it and are able to change it I would recommend doing that, so you don't have to do a js workaround

[babrewer]

Like this:
<div class="btn-group dropdown"> <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">

If so, that doesn't work for me.

[ercchy]

My markup looks like this:

 <div class="dropdown btn-group">
      <button class="btn gradient dropdown-toggle" data-toggle="dropdown" id="login">
        Login
      <span class="caret"></span>
       </button>
       <ul class="dropdown-menu">
           <li><a href="some-link">Dropdown1</a></li>                    
       </ul>
</div>

but I am not using any js to initialize behavior. Sometimes it helps if u switch class.

[babrewer]

That doesn't work on my end, not sure what I'm missing, but thanks for the assistance.

[foo4u]

+1

Here's a jsfiddle demonstrating the problem against 2.1.1.

[igal-getrailo]

how come this was never fixed? the main reason I chose Bootstap was for this functionailty and it looks beautiful on a desktop browser but practically useless on mobile devices which are the target for the responsive design in the first place.

and IMO a JS hack is not the solution. these are simple <a href=""> links so there is no reason to require JS hacks (unless JS is what breaks it in the first place, of course).

[igal-getrailo]

the fix by Bitergia/bootstrap@25e8eeb worked for me as well, but the other JS hacks did not.

since I am using the minified, concatenated bootstrap.min.js, I had to change it a little differently as I suggested on StackOverflow at http://stackoverflow.com/questions/17435359/bootstrap-collapsed-menu-links-not-working-on-mobile-devices/17440942#17440942

[baltazarz3]

on lines:

if (!isActive) {
if ('ontouchstart' in document.documentElement) {
// if mobile we we use a backdrop because click events don't delegate
$('

').insertBefore($(this)).on('click', clearMenus)
}
$parent.toggleClass('open')
}

Just change
"ontouchstart"
to
"disable-ontouchstart"

That fix do the trick as link listed by @igal-getrailo in stackoverflow

[robdodson]

Seeing this in Bootstrap 2.3.2 as well :(

I'm not in a position where I can tweak the bootstrap source so I'm kinda stuck unless I want to do some kind of prototype hack.

+1 for a fix

[robdodson]

I think this will also work if you don't want to hack on the bootstrap source. Though I haven't tested it very much...

$('.dropdown a').click(function(e) {
  e.preventDefault();
  setTimeout($.proxy(function() {
    if ('ontouchstart' in document.documentElement) {
      $(this).siblings('.dropdown-backdrop').off().remove();
    }
  }, this), 0);
});

kinda grizzly but it did fix my issue.

[gfriebe]

thanks @robdodson . this saved me a lot of time. works for now!

[ayottepl]

Thanks @baltazarz3 it works! Nice job :) 👍

[cvargasp]

@baltazarz3 This makes it work the dropdown of a collapsable navbar on mobile devices?

in that place I put it??

[robdodson]

cc @gfriebe

amending my previous post. if you do what I originally said you'll disable all links in your dropdowns, which you probably don't want.

the better approach would be to use .dropdown-toggle instead of .dropdown a.

$('.dropdown-toggle').click(function(e) {
  e.preventDefault();
  setTimeout($.proxy(function() {
    if ('ontouchstart' in document.documentElement) {
      $(this).siblings('.dropdown-backdrop').off().remove();
    }
  }, this), 0);
});

[cvrebert]

#7968 has been fixed in v3.0.0-wip.

[cvargasp]

@cvrebert who is 3.0.0-wip??? i need this dropdown in my navbar

[cvrebert]

@cvargasp 3.0.0-wip is the branch in the git repo for the upcoming release of Bootstrap: https://github.com/twitter/bootstrap/tree/3.0.0-wip

[cvargasp]

@cvrebert how along this branch (3.0.0-wip) to bootstrap that I have on my computer?

[baltazarz3]

@cvargasp sorry for my late response. This fix fixes the submenus click/touch issue in the collapsable nav bar on mobile devices.

@ayottepl im glad it helped!!

[cvrebert]

@cvargasp Read some git docs. I'm not a git tutor.

[TatianaTyu]

thanks @robdodson, worked for me.

[fllykk]

For 2.3.2 there is a fix, add css property
.dropdown-backdrop{
position: static;
}
http://stackoverflow.com/questions/17579750/drop-down-menu-not-working-on-mobile-devices