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?

[holgua]

+1

[dhulihan]

+1

[koenpunt]

Tagging this issue as popular, please stop commenting on this issue with +1. thanks!

[koenpunt]

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!

[MikiMullor]

@koenpunt

please read the entire thread before posting.

[bobdenotter]

@koenpunt If you had actually read this thread, you would've seen that there are already two jsfiddles posted.

http://jsfiddle.net/DSjDa/ http://jsfiddle.net/5Zcyf/

You're also the third person to post the boilerplate message about the guidelines.

[tonybruess]

@MikiMullor and @bobdenotter

That message is a side effect of make haunt - just ignore it.

[bobdenotter]

Maybe somebody should fix "make haunt", then? ;-)

On Mon, Oct 8, 2012 at 7:01 PM, MonsieurApple notifications@github.comwrote:

@MikiMullor https://github.com/MikiMullor and @bobdenotterhttps://github.com/bobdenotter

That message is a side effect of '''make haunt''' - just ignore it.

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

Bob den Otter - bob@twokings.nl - 070-3457628 - www.twokings.nl

[stevecoug]

Should we file a bug report about make haunt?

[tonybruess]

There's an issue open at fat/haunt#11

[koenpunt]

My bad, did run make haunt to see what it does and at first it showed me nothing, but now I see; it commented on all the issues..

[koenpunt]

And that probably isn't a bug but just ignorance because in the Makefile it states:

# HAUNT GITHUB ISSUES 4 FAT & MDO ONLY (O_O  )

[wrightlabs]

+1 for drop down links on touch devices (critical!)

the make haunt issue is hilarious

[andrewdeandrade]

@wrightlabs yup, happened to me about 1-2 weeks ago as well. Interestingly it did have a lot of positive impact on the issues and pull requests for Twitter Bootstrap. Tons of the people who had opened or were watching issues followed through with the requests for tests on pull requests or jsfiddles/jsbins on issues. I think it's definitely a tool that my co-workers and I plan on using on the project my company will be open sourcing in a few months.

[petergerard]

@dieselcz your solution also worked for me to get dropdowns working on iPad again with 2.1.1

Should be noted that the .dropdown-toggle needs to have a .dropdown container as a parent.

So if you want button dropdowns on iOS, the code samples on the bootstrap guide still won't work unless you change the containing div to:

<div class="btn-group dropdown">

I hope this patch gets included in 2.2.0 along with updated code samples that work.

[stevecoug]

Getting it to work on Android is still a problem, @accidental. I ended up writing my own dropdown implementation. It doesn't support submenus, but it's a lot shorter than the Bootstrap code. The key was to have a delay between when the menu was opened, and when you start checking for clicks or touches outside the menu.

[fred]

Adding dropdown class to the parent div didn't help.

@fridgesm would you share your implementation? :)

[petergerard]

@fridgesm can you share your code? I definitely don't need sub-menus.

[stevecoug]

@fred and @accidental, here you go: https://github.com/fridgesm/bootstrap-dropdown

[fred]

@fridgesm Thank you!

Lol at the sm- prefix :laughing:

[RusAlex]

it's not yet fixed with last merge commit. at least for me.

[dieselcz]

I tested my workaround above on Android 2.3 and 4.1.

[petergerard]

I can also confirm the fix from @dieselcz is working on Android 2.3.5. (with the .dropdown container as mentioned above)

[RusAlex]

guys, what are you talking about ? @fat says that his last merge artiz/master was fixed this issue, but it doesn't. Can anyone else prove that master branch (last commit) still has this issue ?

[artiz]

I have not checked issue on iPhone, only on Android 2.6 browser and on desktop Google Chrome in small resolution. I think that fix from @dieselcz (https://github.com/twitter/bootstrap/issues/4550#issuecomment-8684262) should help you

[RusAlex]

@artiz , the problem is, that it's not official bootstrap team fixes.

[fguillen]

+1

[kate-lynch]

https://github.com/twitter/bootstrap/issues/4550#issuecomment-8447095 Worked perfectly for me

[Syone]

http://twitter.github.com/bootstrap/javascript.html#dropdowns

doesn't work for me. tested on android 4.1 with chrome, firefox and default browser

[fred]

The above hack from @hackeron works on:

• iOS 6 Safari
• iOS 6 Chrome
• Android 4.1 Chrome

Does not work on

• Android 4.1 Default Browser

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

I guess that covers more than 90% :D of users :+1:
cheers

[ivos]

On Android 2.3.5, default browser. Tried https://github.com/twitter/bootstrap/issues/4550#issuecomment-8684262, did not work. Next was https://github.com/twitter/bootstrap/issues/4550#issuecomment-8525357, and this one worked.

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

[verschoof]

I'm trying to fix the sub menus on a iPad. I have the next code to fix my sub menu.

$(function () {
    $('html')
      .on('click.dropdown.data-api touchstart.dropdown.data-api', clearMenus)
    $('body')
      .on('click.dropdown', '.dropdown form', function (e) { e.stopPropagation() })
      .on('touchstart.dropdown.data-api', '.dropdown', function (e) { e.stopPropagation() })
      .on('touchstart.dropdown.data-api', '.dropdown-menu', function (e) { e.stopPropagation() })
      .on('click.dropdown.data-api touchstart.dropdown.data-api'  , toggle, Dropdown.prototype.toggle)
      .on('keydown.dropdown.data-api touchstart.dropdown.data-api', toggle + ', [role=menu]' , Dropdown.prototype.keydown)
  })

But the sub-sub menu is still not fixed. How to fix this?

[RusAlex]

Wait until developers fix it. And use version 2.0

[verschoof]

When is the release?

[RusAlex]

Authors said, that it's already fixed. But not for me. And for several others. Hope they read this topic.

On Wed, Oct 24, 2012 at 03:39:03AM -0700, Mitchel wrote:

When is the release?

— Reply to this email directly or [1]view it on GitHub. [YkPp7ckUmF7vZASNJwP_Af2NXo3F34FIyIgdguo2oFFmPioy0113PgK93uDSJDLC.gif]

References

1. https://github.com/twitter/bootstrap/issues/4550#issuecomment-9734871

[verschoof]

I have rebuild the nav bar. Who can make this fix on the iPad?

http://jsfiddle.net/PJpjA/3/

[TommyC81]

This is still a problem for me, I've tried both 2.1.1 and checked out 2.1.2. Touch just closes the menus. Any idea when a proper fix will be done?

[joebotha]

I am having the same issue.

[gderderian]

I am also experiencing this issue on an iPhone with iOS6.

[anthonator]

Still seeing this issue in 2.2.0.

[verschoof]

@fat ping

[TommyC81]

Android 4.0, 4.1 still not working...

[toupeira]

With 2.2.0 the following workaround seems to fix it on Android 4.1's stock browser and iOS 5.1's Safari:

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

(add it after your main Bootstrap includes)

I've noticed that the Android stock browser seems to require a long-tap to keep the dropdown menu open, otherwise it disappears again immediately. Not sure if this is expected behaviour or something Bootstrap could work around.

[stevecoug]

The problem on Android is that it processes it as a touch outside of the dropdown before the dropdown is completed, so it immediately removes it. In my separate dropdown code, I made it wait .5 seconds before allowing touches outside the dropdown to close it.

[winterstetter]

@fat ping - Thanks!

[jdubois]

+1 here also!

[saschlong]

+1

[winterstetter]

@mdo Mark, I deem it sad that this issue has not been closed for such a long time. As neither the developers nor the community have come up with a solid solution - isn't it time to simplify even more? I would appreciate your comment.

Sincerely, Thomas

[petergerard]

There are many different Android devices and versions out there, so it's hard to test them all.

We implemented the fix proposed by @dieselcz a couple months ago and it works on iOS and all Androids we've been able to test. Just make this change in bs2.1.1. I haven't tried the fix on bs2.2.1. (and make sure that there's a class="dropdown" in your container object - this was incorrect in the docs)

I've put a demo in a jsfiddle for everyone to try on their various Androids

I've tested on an HTC, a Samsung and a Kindle Fire, as well as iPhone, iPad etc.

I haven't tested sub-menus because I don't need them.

[verschoof]

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