On the menus for our site we have a button dropdown for user account options that changes dynamically based on their username and logged in status. It works great in the browsers, however, on Android tablets(using Firefox) we can't seem to click any of the links in the dropdown, although the links DO appear, whenever you click them the dropdown goes away and nothing happens.

I'm using the latest version of Bootstrap(2.1.1), with the dropdown plugin. It works on desktops, and it's clickable by the tablets, the links just close the popup when clicked.

Here's the code:

     <div class="btn-group pull-right">
        <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
          <i class="icon-user"></i> <?php echo $_SESSION['username']; ?>
          <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
          <li><a href="/Profile">Profile</a></li>
          <li class="divider"></li>
          <li><a href="#" onClick="logOut();">Sign Out</a></li>
        </ul>
      </div>

Does anyone know of a way to make the links clickable from tablets?

On the menus for our site we have a button dropdown for user account options that changes dynamically based on their username and logged in status. It works great in the browsers, however, on Android tablets(using Firefox) we can't seem to click any of the links in the dropdown, although the links DO appear, whenever you click them the dropdown goes away and nothing happens.

I'm using the latest version of Bootstrap(2.1.1), with the dropdown plugin. It works on desktops, and it's clickable by the tablets, the links just close the popup when clicked.

Here's the code:

     <div class="btn-group pull-right">
        <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
          <i class="icon-user"></i> <?php echo $_SESSION['username']; ?>
          <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
          <li><a href="/Profile">Profile</a></li>
          <li class="divider"></li>
          <li><a href="#" onClick="logOut();">Sign Out</a></li>
        </ul>
      </div>

Does anyone know of a way to make the links clickable from tablets?

• javascript
• android
• twitter-bootstrap
• tablet

• I'm experiencing the exact same problem, do you found a solution? – Niels Commented Oct 1, 2012 at 19:06
• I haven't yet, I just started making separate links from the dropdown links in other locations on the website, so it's a workaround, not a solution. – Ecksters Commented Oct 2, 2012 at 20:57

3 Answers 3

This is a bug in Bootstrap that will hopefully be rectified in 2.1.2 - in the meantime, there are two popular issues (#2975 & #4550) on GitHub that contain temporary fixes.

This jQuery fix seems to work for most people and doesn't modify the Bootstrap source:

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

To fix submenus too:

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

This is confrmed fixed in v2.2 and greater.