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

Closed
MikiMullor opened this Issue Aug 22, 2012 · 192 comments

Projects

None yet
@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
Stefac commented Aug 22, 2012

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

@jwilson
jwilson commented Aug 23, 2012

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
dpwolf commented Aug 23, 2012

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
ShivX commented Aug 27, 2012

+1

Looking forward to the fix in 2.1.1

@fat
Member
fat commented Aug 27, 2012

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 Aug 27, 2012
@ShivX
ShivX commented Aug 28, 2012

@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
dpwolf commented Aug 28, 2012

@ShivX thanks!

@mdo mdo reopened this Aug 28, 2012
@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
babrewer commented Sep 5, 2012

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
Contributor

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

@dcorb
dcorb commented Sep 6, 2012

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
thezoggy commented Sep 9, 2012

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
crag commented Sep 9, 2012

Also have this problem on IOS 6.

@blakeembrey
Contributor

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
Contributor

@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

@xanview
xanview commented Sep 11, 2012

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
ercchy commented Sep 12, 2012

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
ercchy commented Sep 12, 2012

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
foo4u commented Sep 12, 2012

+1

Here's a jsfiddle demonstrating the problem against 2.1.1.

@rabiraj
rabiraj commented Sep 13, 2012

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

@blakeembrey
Contributor

@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
rabiraj commented Sep 13, 2012

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
Contributor

@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
auxbuss commented Sep 24, 2012

+1 on 2.1.1

I've reverted to 2.0.4 js for now

@stevecoug stevecoug added a commit to stevecoug/bootstrap that referenced this issue Sep 25, 2012
@stevecoug stevecoug Fix for issue #4550: Button dropdown links don't work on mobile (andr…
…oid, iOS)
c2bb747
@stevecoug stevecoug added a commit to stevecoug/bootstrap that referenced this issue Sep 25, 2012
@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
abhisec commented Sep 26, 2012

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
ivos commented Sep 27, 2012

+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
Contributor
artiz commented Sep 27, 2012

Please skip commit fbccd6b - it was invalid

@thezoggy

rebase and force push

@Hillshum
Hillshum commented Oct 1, 2012

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
holgua commented Oct 3, 2012

+1

@dhulihan
dhulihan commented Oct 8, 2012

+1

@koenpunt
Contributor
koenpunt commented Oct 8, 2012

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

@koenpunt
Contributor
koenpunt commented Oct 8, 2012

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
Contributor
koenpunt commented Oct 9, 2012

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
Contributor
koenpunt commented Oct 9, 2012

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
Contributor

+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
fred commented Oct 17, 2012

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
fred commented Oct 17, 2012

@fridgesm Thank you!

Lol at the sm- prefix 😆

@RusAlex
RusAlex commented Oct 18, 2012

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
RusAlex commented Oct 18, 2012

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
Contributor
artiz commented Oct 18, 2012

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
RusAlex commented Oct 18, 2012

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

@fguillen

+1

@kate-lynch

#4550 (comment) Worked perfectly for me

@Syone
Syone commented Oct 23, 2012

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
fred commented Oct 23, 2012

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 👍
cheers

@ivos
ivos commented Oct 23, 2012

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
RusAlex commented Oct 24, 2012

Wait until developers fix it. And use version 2.0

@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
mival commented Dec 14, 2012

@danielfranz Thanks, looks like that your solution works

@RusAlex
RusAlex commented Dec 14, 2012

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

@draxtor
draxtor commented Dec 23, 2012

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

Thanks!

@nshankar

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

@rileytg
rileytg commented Jan 25, 2013

@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
rileytg commented Jan 25, 2013

Resolved, it was a conflict with the js library fastclick

@jfaneuf
jfaneuf commented Jan 25, 2013

Cool so what's the fix?

@rileytg
rileytg commented Jan 25, 2013

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
jfaneuf commented Jan 25, 2013

great thank you.

@zfdang
zfdang commented Jan 26, 2013

fixed with the latest release.

@rileytg
rileytg commented Jan 26, 2013

Of what?

@jfaneuf
jfaneuf commented Jan 27, 2013

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
rileytg commented Feb 6, 2013

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

@OndeVai
OndeVai commented May 3, 2013

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
rileytg commented May 17, 2013

@GrahamDj

  • What version are you using?
  • are you using fast click or any other js lib that would intercept events?
@fat
Member
fat commented May 17, 2013

we just pushed a patch release 2.3.2 which fixes this

@aitala
aitala commented May 20, 2013

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
acs commented May 21, 2013

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
aitala commented May 21, 2013

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
acs commented May 21, 2013

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
Member

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

@pedrogk
pedrogk commented Jun 13, 2013

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

@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 Jul 1, 2013
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
gfriebe commented Jul 18, 2013

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
Member

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

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

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

@ashtaroth ashtaroth pushed a commit to ashtaroth/gwt-bootstrap that referenced this issue Nov 6, 2013
@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 pushed a commit to ashtaroth/gwt-bootstrap that referenced this issue Nov 6, 2013
@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 Nov 6, 2013
Merged

Navigation dropdown fix for mobile browsers #451

@TatianaTyu

thanks @robdodson, worked for me.

@tushroy tushroy pushed a commit to tushroy/bootswatch that referenced this issue Dec 21, 2013
@thomaspark thomaspark temporarily fixes #100 based on twbs/bootstrap#4550 (comment) 54a4a46
@KenYN KenYN referenced this issue in cantino/huginn Jan 9, 2014
Closed

Upgrade from Bootstrap 2 to Bootstrap 3 #123

@fllykk
fllykk commented Jan 9, 2014

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

@stempler stempler pushed a commit to stempler/bootstrap that referenced this issue Apr 11, 2014
@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 added a commit to kajona/kajonacms that referenced this issue Apr 14, 2014
@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
@sidler sidler added a commit to kajona/kajonacms that referenced this issue Apr 14, 2014
@sidler sidler NEW: updated the skin to bootstrap 2.2.1, still facing problems on mo…
…bile devices, see twbs/bootstrap#4550
ea1a4e4
@cvrebert cvrebert locked and limited conversation to collaborators Jun 13, 2014
@stempler stempler pushed a commit to stempler/bootstrap that referenced this issue Nov 4, 2014
@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 pushed a commit to malducin-vfxfan/mocon-cms that referenced this issue Feb 24, 2015
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.