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);
});

jQuery Form Validation with Styles from Twitter Bootstrap

Feb 5, 2013

This tutorial, the demo, and the jQuery code have been updated in light of excellent recommendations made by commenters.

Thanks all!

jQuery Form Validation ScreenshotThe jQuery Validate plugin by Jörn Zaefferer is a fantastic tool for providing users with immediate feedback while completing a web form. Used by Newsweek and others.

Here I’ve put together a working example, integrated with markup and styles from Twitter Bootstrap’s excellent front-end framework. The demo and sample files include markup, CSS, and JS.

See the Demo

Get the Sample Files