Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

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

Closed
MikiMullor opened this Issue · 192 comments
@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
Owner

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!

@fat fat closed this
@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!

@mdo mdo reopened this
@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

@hackeron

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.

@rabiraj

Has anyone worked around this issue?
workaround mentioned by @fridgesm does not fix the issue in android browser.

@blakeembrey

@rabiraj In what way doesn't it work? If you are creating the dropdown menu after you add that fix, it won't work. Which is why I said to add it to the body tag. E.g.

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

thanks, @blakeembrey , earlier I tried
$('.dropdown-menu').on('touchstart.dropdown.data-api', function(e) { e.stopPropagation() }) which did not work.
Using
$('body').on('touchstart.dropdown', '.dropdown-menu', function (e) { e.stopPropagation(); }); as you suggested seems to fix the issue for me.

Also, I noticed with or without the fix, sometimes the dropdown do not open. To test, create 3 dropdown buttons on navbar and touch all the dropdown buttons quickly. It does not open dropdown sometimes.

It may also be the problem due to click and touch. Any suggestions?

@james3burke

The 4812 patch fixed the problem for me on navbar dropdowns (tested on android chrome), but not dropdowns for other buttons. As mentioned by @ercisson earlier though adding 'dropdown' to the class of the parent tag fixed normal buttons too. This doesn't match the documentation on the twitter bootstrap 'Components' page, but it gets the job done. I've not touched the javascript at all.

@blakeembrey

@james3burke Could you test #5067 in the same conditions? It's my latest PR and should have all the same fixes found in the issue you just mentioned. Plus I am not sure whether adding .dropdown would fix the issue in the latest version, as that code is now targeting block event propagation on .dropdown form.

@danielspangler

@blakeembrey I'm new to this thread, but I just tried #5067 on a scenario that wasn't working with some of the other suggestions on this thread and it's working fine now on ios. It also fixed another seemingly unrelated javascript error I was getting on ios when dynamically adding content to the dom and showing it as a modal within a button click handler.

@richbradshaw

Here's a super minimal test case: http://jsfiddle.net/DSjDa/

I've inlined the CSS and JS, but it's clear that it doesn't work.

@dieselcz

My workaround is to divide this line in bootstrap-dropdown.js:


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

into two lines:


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

Tested on android 2.3

@auxbuss

+1 on 2.1.1

I've reverted to 2.0.4 js for now

@stevecoug stevecoug referenced this issue from a commit in stevecoug/bootstrap
@stevecoug stevecoug Fix for issue #4550: Button dropdown links don't work on mobile (andr…
…oid, iOS)
c2bb747
@stevecoug stevecoug referenced this issue from a commit in stevecoug/bootstrap
@stevecoug stevecoug Update to fix for issue #4550, based on twbs#4550 (comment) b2a23b2
@pixelbind

@dieselcz - your solution worked for me on iOS6 with Safari and Dolphin.
Thanks!

@danielfranz

This is what worked for me:

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

It also makes dropdown menus that are submenus work as expected on touch devices.

@Bossa573

@danielfranz That's works form me too, thanks! the dropdown menu won't disappear when I click the blank area, at least the link under the menu can be clicked now

@dieselcz

@pixelbind Glad to help.

@abhisec

Is this assigned to somebody and will we see a fix in 2.2?

@dmcycloid

yep, @dieselcz solution(#4550 (comment)) working Android 4.1 Chrome & iOS 6 Safari

@malandrew

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!

@briankiewel

@malandrew there are already 2 jsfiddles linked in here.

@stevecoug

@malandrew,

How is this not a critical issue? Dropdowns are completely non-functional on touch devices, and you guys are splitting hairs about filing guidelines? We're all trying to figure out how to fix the issue ourselves, without any help from the core team, on an issue that should be a roadblock.

If touch devices such as iOS and Android are not considered core functionality, then please tell me now so I don't waste my time.

@maimairel

This malandrew guy is just spamming, he just copy pasted what he wrote above on almost every open issues..

@ivos

+1

Experienced on Android 2.3.5, BS 2.1.0.

@malandrew

Sorry about what looks like spamming. I was playing around with the bootstrap Makefile on my computer and it looks like whatever happened is the sideeffect of running make haunt. I didn't expect any sideeffects of exploring the makefile options to propagate to dozens of issues on github.

@fat if someone else runs make haunt they'll end up causing this problem accidentally.

@artiz artiz referenced this issue from a commit
Commit has since been removed from the repository and is no longer available.
@artiz artiz referenced this issue from a commit in artiz/bootstrap
@artiz artiz Fix for #4550
Also fixes dropdowns hiding behavior for case when two or more dropdowns
with [data-toggle=dropdown] exist on the page
0944e03
@artiz

Please skip commit fbccd6b - it was invalid

@thezoggy

rebase and force push

@Hillshum

Because the only workaround listed that actually worked for me was #4550 (comment) I ended up just writing my own event handlers for the links in question that used window.location

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

@malandrew

@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.

@accidental

@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? :)

@accidental

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

@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.

@accidental

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 (#4550 (comment)) should help you

@RusAlex

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

@leightonshank leightonshank referenced this issue from a commit in getloaded/bootstrap
@leightonshank leightonshank work-around for issue twbs/bootstrap#4550
dropdown menus are broken in bootstrap 2.1.1 on touch devices.  seems
that in browsers, the click event needs to propagate in order for the
dropdown menu to clear.  on touch devices (iOS, Android), it seems that
the if the touchstart event propagation doesn't get stopped at the
dropdown level then it bubbles all the way up and the element under
the dropdown menu item receives the event.

Hopefully the issue will be cleared up in the 2.1.2 release, until then
this workaround should keep us going.
098abe4
@kate-lynch

#4550 (comment) 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 #4550 (comment), did not work.
Next was #4550 (comment), 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
@verschoof

When is the release?

@RusAlex
@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.

@andrewalker andrewalker referenced this issue from a commit
@artiz artiz Fix for #4550
Also fixes dropdowns hiding behavior for case when two or more dropdowns
with [data-toggle=dropdown] exist on the page
bc943b6
@gderderian

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

@anthonator

Still seeing this issue in 2.2.0.

@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.

@thomaswinterstetter

@fat ping - Thanks!

@rfc1459 rfc1459 referenced this issue from a commit in rfc1459/newblog
@rfc1459 rfc1459 Add workaround for twbs/bootstrap#4550
Also, remove some dead jQuery code.
ab2d87a
@lasseebert lasseebert referenced this issue in mongoid/mongoid-site
Closed

Docs menu not usable in Chrome for Android #195

@xiaogaozi xiaogaozi referenced this issue from a commit in xiaogaozi/bootstrap
@xiaogaozi xiaogaozi Fix #4550 7bd46ea
@jdubois

+1 here also!

@thomaswinterstetter

@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

@accidental

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/

@tonybruess
@accidental

@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?

@Zetberg

@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
@accidental

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: #5900 (comment)
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

@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
@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/

@thomaswinterstetter

@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>
@thomaswinterstetter

Excellent, tk you @holly73

@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.

@davidcochran

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 c9cef74, 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.

@elfet

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.

@mdo mdo closed this issue from a commit
@mdo mdo Fixes #4550: Temporary fix for dropdown taps on mobile
* Fix as documented here: #4756 (comment)
* Stops propagation for touchstart for dropdowns
ed74992
@mdo mdo closed this in ed74992
@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: #6221 . i created a jsfiddle for that:

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

@mival

@danielfranz Thanks, looks like that your solution works

@RusAlex
@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.

@FrankDeGroot FrankDeGroot referenced this issue from a commit
@mdo mdo Fixes #4550: Temporary fix for dropdown taps on mobile
* Fix as documented here: #4756 (comment)
* Stops propagation for touchstart for dropdowns
32c437e
@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.

@edmeehan edmeehan referenced this issue from a commit
Commit has since been removed from the repository and is no longer available.
@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: #4550 (comment)

Thanks!

@nshankar

+1 to @drupaljoe 's solution. Perfectly practical.

@rileytg

@barmstrong @nshankar I'm still having the issue as well even with 2.2.2(.0). I'm using thomas-mcdonald/bootstrap-sass and heres my haml:

.navbar.navbar-fixed-top.navbar-inverse
  .navbar-inner
    .container
      %a.btn.btn-navbar{data: {toggle: "collapse", target: "#top-nav"}}
        %span.icon-bar
        %span.icon-bar
        %span.icon-bar
      .brand
        = link_to shoes_path do
          = image_tag "ptjwhite.png", alt: 'xxx'
      .nav-collapse#top-nav
        %ul.nav.pull-right
          - unless @brands.nil?
            %li.dropdown
              %a.dropdown-toggle#brands-menu{href: '#', data: {toggle: 'dropdown'}, role: 'button'}<
                Brands
                %b.caret
              %ul.dropdown-menu(role='menu' aria-labelledby='brands-menu')
                - @brands.each do |brand|
                  - unless brand.shoes.empty?
                    %li
                      %a{href: "##{dom_id(brand)}", tabindex: "-1"}
                        = brand.name

I've tried including @drupaljoe 's solution above, below, and between importing bootstrap and responsive. Perhaps its a problem with haml? Anybody else using haml to make a responsive navbar with dropdowns.

@rileytg

Resolved, it was a conflict with the js library fastclick

@jfaneuf

Cool so what's the fix?

@rileytg

Just got it:
%a.dropdown-toggle.needsclick
you need to add the needsclick class to the .bootstrap-toggle as per
ftlabs/fastclick#48
and
ftlabs/fastclick#59

@jfaneuf

great thank you.

@zfdang

fixed with the latest release.

@rileytg

Of what?

@jfaneuf

Do you mean like the latest nightly build of Joomla?

@betapixel

¡Gracias!. Funcionó para mí. Reemplaze mi archivo bootstrap-dropdown.js por el archivo que modificó Rileytg.

@rileytg

@betapixel you shouldn't need to change any bootstrap files. My issue was a conflict with fastclick.js and the solution was to add the class needsclick to dropdown--toggle element

@betapixel

Ok, thanks again.

@ss-kelsmj ss-kelsmj referenced this issue from a commit
@ss-kelsmj ss-kelsmj Merge tag 'v2.2.2' of git://github.com/twitter/bootstrap
v2.2.2

* tag 'v2.2.2' of git://github.com/twitter/bootstrap: (112 commits)
  Fixes #5729: Nested striped tables
  Nesting tables
  Apply code tag to data attribute on javascript page
  get tests passing for typeahead :P
  insert menu of typeahead after input which it suggests on #3529
  focus on escape in typeahead
  remove slide from carousel constructor #5579
  rebuild and only select visible dropdown items
  add noConflict functionality to all bootstrap plugins
  Fixes #6148: Icons in mini buttons properly aligned
  Fixes #6136: Proper scoping of breadcrumbs divider
  Fix code block white-space breaks within pre tags.
  Escape &times;
  Remove commented out old popover CSS
  Fixes #4550: Temporary fix for dropdown taps on mobile
  Fix up display of dropdown submenu examples on responsive views
  correct link on index page to grid system
  Update js/bootstrap-scrollspy.js
  Once more, update all the favicons to retina
  Align the touch icons attributes
  ...
98d1311
@jywarren jywarren referenced this issue in jywarren/spectral-workbench
Closed

dropdown menu broken on iOS #178

@ssolomon ssolomon referenced this issue from a commit
@artiz artiz Fix for #4550
Also fixes dropdowns hiding behavior for case when two or more dropdowns
with [data-toggle=dropdown] exist on the page
3e702cf
@ssolomon ssolomon referenced this issue from a commit
@mdo mdo Fixes #4550: Temporary fix for dropdown taps on mobile
* Fix as documented here: #4756 (comment)
* Stops propagation for touchstart for dropdowns
5a2be9b
@OndeVai

I'm still seeing the issue in ipad for 2.3.0

@GrahamDj

None of the "solutions" worked for me. So what i did was add this to my own js file that is loaded after bootstrap.js

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

Just force the browser to redirect to the clicked link. Clicking on the body of the webpage will still close the dropdown menu. No need in catching the event. Should always work because

window.location.href

is supported by all main browsers.

Just add the code to any js file that is loaded after the bootstrap js files

@rileytg

@GrahamDj

  • What version are you using?
  • are you using fast click or any other js lib that would intercept events?
@fat
Owner

we just pushed a patch release 2.3.2 which fixes this

@aitala

Has it been fixed? As far as I can tell it has not. I am still having issues with the menus not being clickable.

Eric

@acs

2.3.2 does not work for me. I have returned "js/bootstrap-dropdown.js" to 2.2.1 version, apply this change http://movableapp.com/2012/11/twitter-bootstrap-dropdown-bugfix/ and now it is working nicely. I hope tomorrow I will have time to understand how to make it work in 2.3.2 studying the changes.

@aitala

Confirmed on http://ipmsusa.org/bootstrap2/hero.html with iOS 6.1.3 on iPad and iPhone. And just to be explicit, I only replaced bootstrap-dropdown.js with the 2.2.1 version, applied the patch as noted, and am using jQuery 1.9.1 .

@acs

Ok, after some debugging, with this simple logic removal dropdown touch works with last version:

Bitergia@25e8eeb

I suppose that the problem is with isActive detection logic.

@manuscle

Hello, i still have the problem with bootstrap v2.3.2
i'm not using other third party lib
I tried with androis 4 emulator and my galaxy s1 phone

@cvrebert
Owner

Recent commenters (@aitala @acs @manuscle): this bug is ancient. You want #7968.

@pedrogk

Was having this problem too with bootstrap v.2.3.2

The fix by @acs (Bitergia@25e8eeb) solved it for me.

@michaelcarter

@acs 's suggestion works for me. :+1:

@GrahamDj

Just wondering, why would anybody want to first clear the menu if the page will reload anyway? If you are using ajax to get page content I can understand, but for a normal page i just don't get the point of this

@datyger datyger referenced this issue in DISID/bootstrap-theme
Closed

Menu Items w Children Not Functional on iPad / Android #4

@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@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 :) :+1:

@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
Owner

#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
Owner

@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
Owner

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

@ashtaroth ashtaroth referenced this issue from a commit in ashtaroth/gwt-bootstrap
@aonischenko aonischenko Navigation DropDown fix for mobile devices
Fix approach is taken from Twitter Bootstrap 3.0

Twitter Bootstrap bug reports:
twbs/bootstrap#4550
twbs/bootstrap#6488
9c7eee1
@ashtaroth ashtaroth referenced this issue from a commit in ashtaroth/gwt-bootstrap
@aonischenko aonischenko Navigation DropDown fix for mobile devices
Fix approach is taken from Twitter Bootstrap 3.0

Twitter Bootstrap bug reports:
twbs/bootstrap#4550
twbs/bootstrap#6488
607da2e
@ashtaroth ashtaroth referenced this issue in gwtbootstrap/gwt-bootstrap
Merged

Navigation dropdown fix for mobile browsers #451

@getscripted

thanks @robdodson, worked for me.

@tushroy tushroy referenced this issue from a commit in tushroy/bootswatch
@thomaspark thomaspark temporarily fixes #100 based on twbs/bootstrap#4550 (comment) 54a4a46
@KenYN KenYN referenced this issue in cantino/huginn
Closed

Upgrade from Bootstrap 2 to Bootstrap 3 #123

@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

@monsieurchico monsieurchico referenced this issue from a commit
Commit has since been removed from the repository and is no longer available.
@sidler sidler referenced this issue from a commit
Commit has since been removed from the repository and is no longer available.
@sidler sidler referenced this issue from a commit
Commit has since been removed from the repository and is no longer available.
@stempler stempler referenced this issue from a commit in stempler/bootstrap
@artiz artiz (less) Fix for #4550
Also fixes dropdowns hiding behavior for case when two or more dropdowns
with [data-toggle=dropdown] exist on the page
4aea2bf
@sidler sidler referenced this issue from a commit in kajona/kajonacms
@sidler sidler BUG: added dashboard to light-package
BUG: added temporary workaround for bootstrap-dropdown issue on mobile devices (twbs/bootstrap#4550)
BUG: fixed apply-button in installer
9c30288
@Reefstah Reefstah referenced this issue from a commit
@artiz artiz Fix for #4550
Also fixes dropdowns hiding behavior for case when two or more dropdowns
with [data-toggle=dropdown] exist on the page
2b5de56
@cvrebert cvrebert locked and limited conversation to collaborators
@danpoltawski danpoltawski referenced this issue from a commit
Commit has since been removed from the repository and is no longer available.
@stempler stempler referenced this issue from a commit in stempler/bootstrap
@artiz artiz (less) Fix for #4550
Also fixes dropdowns hiding behavior for case when two or more dropdowns
with [data-toggle=dropdown] exist on the page
f1629bc
@malducin-vfxfan malducin-vfxfan referenced this issue from a commit in malducin-vfxfan/mocon-cms
Manuel Alducin Fix Bootstrap dropdown taps on mobile
Implemented the temporary fix for Bootstrap dropdown taps on mobile
browsers, which prevented things like dropdown menus to work
correctly.

Github issue 4550. References:

twbs/bootstrap#4550
twbs/bootstrap@ed74992
twbs/bootstrap#4756 (comment)
d931c9b
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Something went wrong with that request. Please try again.