CODEWITHSUNDEEP
twitter-bootstrap
teknover
teknover

Reputation: 61

Bootstrap Tabs Drop-Down Not Working on Mobile

UPDATE Turns out this is a known issue - it simply does not come up in any searches on Stack Overflow. Hopefully this post raises the spotlight on the problem.

Essentially, Twitter Bootstrap as of 2.2.1 still has a problem with the tab drop-down feature working correctly on mobile.

In fact, when viewed on certain Android and iOS versions, even their own documentation on the above link does not work correctly. To test on your device, try using the drop-down featured here: http://twitter.github.com/bootstrap/javascript.html#tabs

For more solutions and progress on this issue, see the Twitter Bootstrap Github repo for more detail: https://github.com/twitter/bootstrap/issues/4550

//////////////////////////////////////////////////////////////////////

Using Twitter Bootstrap 2.2.1 boilerplate files (css, js) with the standard documentation I cannot get drop-down tabs working on mobile (tested on Android 4.1 in both Browser and Chrome)

Here's the code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/bootstrap-responsive.css" rel="stylesheet">    
    <script src="./js/jquery-1.8.2.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <script>
    $('#myTab a').click(function (e) {e.preventDefault();
  $(this).tab('show');
})
</script>
  </head>
<body>
<div class="row">
  <div class="span12">
     <ul id="myTab" class="nav nav-tabs">
              <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
              <li><a href="#profile" data-toggle="tab">Profile</a></li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b     class="caret"></b></a>
                <ul class="dropdown-menu">
                  <li><a href="#dropdown1" data-toggle="tab">@fat</a></li>
                  <li><a href="#dropdown2" data-toggle="tab">@mdo</a></li>
                </ul>
              </li>
            </ul>
            <div id="myTabContent" class="tab-content">
              <div class="tab-pane fade in active" id="home">
                <p>Raw</p>
              </div>
              <div class="tab-pane fade" id="profile">
                <p>Food</p>
              </div>
              <div class="tab-pane fade" id="dropdown1">
                <p>Etsy</p>
              </div>
              <div class="tab-pane fade" id="dropdown2">
                <p>Trust</p>
              </div>
            </div>
          </div>
        </div>
   </body>
</html>

Any ideas?

Upvotes: 3

Views: 4941

Answers (2)

coliff
coliff

Reputation: 1017

This issue is fixed with Bootstrap 2.2.2

https://github.com/twbs/bootstrap/wiki/Changelog

Upvotes: 3

000
000

Reputation: 3950

If you are talking about the dropdown with @fat and @mdo options then you need to change your design..as even if you get it to work on mobile then also it won't be a comfortable experience for your users..

May be this link will help you rethink over the design that you are trying for mobile..

You may alternatively think to incorporate more tabs without dropdown or can use buttons or links, whichever suits best as per your requirements..

Upvotes: 0

Related Questions