New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

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

Comments

Projects
None yet
@MikiMullor

MikiMullor commented Aug 22, 2012

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

This comment has been minimized.

Stefac commented Aug 22, 2012

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

@jwilson

This comment has been minimized.

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

This comment has been minimized.

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

This comment has been minimized.

ShivX commented Aug 27, 2012

+1

Looking forward to the fix in 2.1.1

@fat

This comment has been minimized.

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

This comment has been minimized.

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

This comment has been minimized.

dpwolf commented Aug 28, 2012

@ShivX thanks!

@mdo mdo reopened this Aug 28, 2012

@Zylinderkatze

This comment has been minimized.

Zylinderkatze commented Sep 4, 2012

+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

This comment has been minimized.

Starefossen commented Sep 5, 2012

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

@babrewer

This comment has been minimized.

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

This comment has been minimized.

Contributor

mikegreiling commented Sep 6, 2012

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

@dcorb

This comment has been minimized.

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

This comment has been minimized.

patrickoehlinger commented Sep 8, 2012

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

@tonybruess

This comment has been minimized.

tonybruess commented Sep 9, 2012

I'm experiencing this issue as well :(

@thezoggy

This comment has been minimized.

thezoggy commented Sep 9, 2012

Pull #4812 looks to address this

@ghost

This comment has been minimized.

ghost commented Sep 9, 2012

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

@crag

This comment has been minimized.

crag commented Sep 9, 2012

Also have this problem on IOS 6.

@blakeembrey

This comment has been minimized.

Contributor

blakeembrey commented Sep 10, 2012

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

This comment has been minimized.

stevecoug commented Sep 11, 2012

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

This comment has been minimized.

Contributor

blakeembrey commented Sep 11, 2012

@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

@ghost

This comment has been minimized.

ghost 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

This comment has been minimized.

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

This comment has been minimized.

babrewer commented Sep 12, 2012

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

This comment has been minimized.

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

This comment has been minimized.

babrewer commented Sep 12, 2012

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

@foo4u

This comment has been minimized.

foo4u commented Sep 12, 2012

+1

Here's a jsfiddle demonstrating the problem against 2.1.1.

@igal-getrailo

This comment has been minimized.

igal-getrailo commented Jul 4, 2013

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

This comment has been minimized.

baltazarz3 commented Jul 10, 2013

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

This comment has been minimized.

robdodson commented Jul 16, 2013

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

This comment has been minimized.

robdodson commented Jul 16, 2013

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

This comment has been minimized.

gfriebe commented Jul 18, 2013

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

@ayottepl

This comment has been minimized.

ayottepl commented Jul 19, 2013

Thanks @baltazarz3 it works! Nice job :) 👍

@cvargasp

This comment has been minimized.

cvargasp commented Jul 20, 2013

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

in that place I put it??

@robdodson

This comment has been minimized.

robdodson commented Jul 22, 2013

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

This comment has been minimized.

Member

cvrebert commented Jul 22, 2013

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

@cvargasp

This comment has been minimized.

cvargasp commented Jul 22, 2013

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

@cvrebert

This comment has been minimized.

Member

cvrebert commented Jul 22, 2013

@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

This comment has been minimized.

cvargasp commented Jul 22, 2013

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

@baltazarz3

This comment has been minimized.

baltazarz3 commented Jul 23, 2013

@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

This comment has been minimized.

Member

cvrebert commented Jul 23, 2013

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

ashtaroth pushed a commit to ashtaroth/gwt-bootstrap that referenced this issue Nov 6, 2013

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

ashtaroth pushed a commit to ashtaroth/gwt-bootstrap that referenced this issue Nov 6, 2013

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

This comment has been minimized.

TatianaTyu commented Dec 4, 2013

thanks @robdodson, worked for me.

@fllykk

This comment has been minimized.

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 pushed a commit to stempler/bootstrap that referenced this issue Apr 11, 2014

(less) Fix for twbs#4550
Also fixes dropdowns hiding behavior for case when two or more dropdowns
with [data-toggle=dropdown] exist on the page

sidler added a commit to kajona/kajonacms that referenced this issue Apr 14, 2014

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

sidler added a commit to kajona/kajonacms that referenced this issue Apr 14, 2014

@twbs twbs locked and limited conversation to collaborators Jun 13, 2014

stempler pushed a commit to stempler/bootstrap that referenced this issue Nov 4, 2014

(less) Fix for #4550
Also fixes dropdowns hiding behavior for case when two or more dropdowns
with [data-toggle=dropdown] exist on the page

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)
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.