5

I have a Twitter Bootstrap (v2.2.1) collapsable navbar and dropdown buttons. They work all chirpy and happy in my desktop browser and also if I resize down my desktop browser window down to mobile size they work happily.

However on a mobile, the dropdowns will open up when you click on the dropdown but clicking on any of the links within the dropdown just causes the dropdown to close without following the link.

This seems similar to this other SO question, but the solution there was to move the data-toggle="dropdown" to the place I have them already.

Here's the html on the page for the dropdown buttons:

<html>
<head>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" />
</head>
<body>
<div class="btn-group">
    <a class="btn btn-primary" href="link1.php">
        Dropdown button
    </a>
    <a class="btn btn-primary dropdown-toggle" href="#" data-toggle="dropdown">
        <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
        <li class="nav-header">Recent</li>
        <li><a href="http://google.com">Google</a></li>
        <li><a href="http://bing.com">Bing</a></li>
    </ul>
</div>
<script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/jquery.js"></script>
<script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap.js"></script>
<script type="text/javascript">
    /**
     * Twitter Bootstrap JQuery
     */
    //!function ($) {
        $(function () {
            $('.dropdown-toggle').dropdown();
        });
    //}
</script>
</body>
</html>

I tested it on an android mobile in the Mobile Opera, Mobile Firefox and default android browser.

enter image description here

Community
  • 1
  • 1
icc97
  • 11,395
  • 8
  • 76
  • 90

2 Answers2

8

I've tracked it down to a bug in Bootstrap 2.2.1 the changelog for 2.2.2 states:

Dropdowns: Temporary fix added for dropdowns on mobile to prevent them from closing early.

If I swapped the bootstrap.js on my site from v2.2.1 to v2.2.2 then the buttons start working.

So now, if I view this code on jsFiddle using the latest v2.2.2 Bootstrap then it works. 

<html>
<head>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" />
</head>
<body>
<div class="container">
<div class="btn-group">
    <a class="btn btn-primary" href="link1.php">
        Dropdown button
    </a>
    <a class="btn btn-primary dropdown-toggle" href="#" data-toggle="dropdown">
        <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
        <li class="nav-header">Recent</li>
        <li><a href="http://google.com">Google</a></li>
        <li><a href="http://bing.com">Bing</a></li>
    </ul>
</div>
</div>
<script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/jquery.js"></script>
<script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap.js"></script>
<script type="text/javascript">
        $(function () {
            $('.dropdown-toggle').dropdown();
        });
</script>   
</body>
</html>
icc97
  • 11,395
  • 8
  • 76
  • 90
0

I spent a lot of time researching this bug on BS 3.0.2 and even the original developers seem to have closed this issue as an iOS 6.1.3 issue. As for the dropdown nav showing behind the next following object, iOS 6.1.3 z-index is overwritten for some reason. Because I was so close to launching my new site, I did not want to redesign this. I fixed my issues with this with an in line style override in the

<nav class="navbar navbar-default" role="navigation" style="z-index:1000;"> .

This also seemed to fix some other issues. Since it was closed I couldn't post my solution to it here https://github.com/twbs/bootstrap/issues/10027

Hope this helps someone else save some time, head ache and hair.

user2197018
  • 593
  • 4
  • 2