16

The most recent version of twitter bootstrap (2.3.2) does seem to have a problem with drop down menus on mobile devices.

When you click on a drop-down menu item after opening the menu, the menu simply closes and no link gets clicked. You can see this on their sample page here: http://twitter.github.io/bootstrap/examples/hero.html

I found an issue posted at their github page but no solution: https://github.com/twitter/bootstrap/issues/7927

Does anybody know the trick to fix it?

maddo7
  • 4,503
  • 6
  • 31
  • 51

7 Answers7

39

A temporary fix is to add

.dropdown-backdrop{
    position: static;
}

to the css file.

maddo7
  • 4,503
  • 6
  • 31
  • 51
11

This worked for me:

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

via robdodson on github

Ryan
  • 14,682
  • 32
  • 106
  • 179
  • 1
    The CSS fix didn't work for me, but this did. Thanks a lot! I'm using the gem "twitter-bootstrap-rails" gem. – Linus Feb 04 '14 at 14:01
  • 1
    Awesome! I'm using also twitter-bootstrap-rails gem. Tried several other fixes. This one worked for me! Great! Thank you! – coderuby May 30 '14 at 17:51
4

For me, it worked adding to my styles:

.dropdown-backdrop {
    z-index:0;
}

almost the same answer as Matthias, i hope it helps.

budi
  • 6,351
  • 10
  • 55
  • 80
Raúl Contreras
  • 81
  • 5
0

I have fixed this issue.

My code is here

   <li class="dropdown custom open"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> menu<b class="caret"></b></a>
             <ul class="dropdown-menu">
                 <li><a href="#">Sub menu</a></li>
                 <li><a href="#">Sub menu2</a></li>
              </ul>
           </li>

Add following style in your CSS fie.

@media (max-width: 767px) { 
.dropdown.custom:hover .dropdown-menu {
  visibility: visible;
  display:block;
  border-radius:0;

}
}

Visit: http://www.s4auto.co.za/

Binilsh K.B
  • 9
  • 3
0

None of the usual answers seemed to fix our problem on Android. We tried the accepted answer here and a few javascript hacks as well: Bootstrap Collapsed Menu Links Not Working on Mobile Devices and http://alittlecode.com/fix-twitter-bootstraps-dropdown-menus-in-touch-screens/

Ultimately we discovered where the close was occurring and conditionally called clearMenus() only if the links parent or grand parent did not have dropdown-submenu class

$(document)
.on('click.dropdown.data-api', function (e) {

    //fix start        
    var $parent = $(e.target).parent()
    var $grandparent = $parent.parent()

    if (!$parent.hasClass('dropdown-submenu') && !$grandparent.hasClass('dropdown-submenu')) {        
        clearMenus()
    }

    //clearMenus

    //end fix
})
.on('click.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
.on('click.dropdown.data-api'  , toggle, Dropdown.prototype.toggle)
.on('keydown.dropdown.data-api', toggle + ', [role=menu]' , Dropdown.prototype.keydown)

}(window.jQuery);

Hope that helps!

Community
  • 1
  • 1
Julian Dormon
  • 1,767
  • 4
  • 32
  • 58
0

Try this. It's work for me

 @media only screen and (max-width: 768px) {
    .dropdown-menu {
        position: absolute;
    }
 }
Chow927
  • 1
-1
$('.dropdown a').click(function(e) {
      e.preventDefault();
      setTimeout($.proxy(function() {
        if ('ontouchstart' in document.documentElement) {
          $(this).siblings('.dropdown-backdrop ').off().remove();
        }
      }, this), 0);

    });
AS Sayem
  • 1