Fix Twitter Bootstrap’s Dropdown Menus in Touch Screens

With Twitter Bootstrap’s 2.1 release, and running through the current version 2.2.1, dropdown menus have stopped working as they should in iOS and Android. Try to tap a submenu item, and the nav simply disappears. See the Github issue here. It is currently slated to be fixed in the upcoming 2.2.2 release, and I’m confident it will be addressed.

Until then, this quick little hack has worked for me. Add the following line of JS after Bootstrap’s bootstrap-dropdown.js (either in your own JS file or by adding it to Bootstrap’s JS):

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

Since then, dropdown menus work as they should in iOS and Android, and I’ve noticed no adverse effects on non-touch devices.

Credit: @blakeembrey’s Github comment here

UPDATE for Bootstrap Version 2.3.2

@robdodson has posted this fix for version 2.3.2 in Github:

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

21 thoughts on “Fix Twitter Bootstrap’s Dropdown Menus in Touch Screens

  1. Dropdown:
    – First option
    – Second option
    – Another dropdown within this one
    – First option of the second dropdown
    – Second option of the second dropdown
    – Third option of the first dropdown

    Is this possible? Thanks in advance! 🙂

  2. Its not working for me. Any Idea? I am uding bootstrap-transition.js v2.3.2.
    Sub menu items are not clickable 😦

  3. hitesh — I’ve just posted the snippet that @robdodson has recommended for version 2.3.2 and that others seem to confirm does the trick. I have not yet had a chance to test myself. I’d be interested to hear your results!

  4. Thank you! I have been fighting this for weeks and spent all day looking for solutions. The last one here finally worked w 2.3.2

  5. Thanks heaps David, I was going to move to Bootstrap 3 but with hundreds of views and the changes between 2.3.2 to 3 this would take me weeks. Plus Bootstrap 3 does not support sub menus anymore.

    So yeah UPDATE for Bootstrap Version 2.3.2 has solved my problems.

    Cheers

  6. Thanks a lot for your update on bootstrap 2.3.2 !!!
    After hours of desperate research, you make my day 🙂

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s