CODEWITHSUNDEEP
javascriptcsstwitter-bootstrap
Yev
Yev

Reputation: 2081

Twitter Bootstrap site not scrolling down in Android browser

I'm working on mocking up a mobile site using twitters bootstrap. The page has a bunch of content which goes "below the fold". For some odd reason, it refuses to scroll down in the Droid browser, while working fine on the iPhone and desktop browsers. The site can be accessed here: http://mpds.a2opinion.com . My code is included below:

<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="robots" content="noindex,nofollow">
<title></title>
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/bootstrap.min.css">
<style>
  body {
    margin:0 !important;
    padding:0 !important;
  }
  .navbar-fixed-top, .navbar-fixed-bottom {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
  .half {
    float: left !important;
    padding-bottom: 5px;
    width: 50% !important;
  }
  .navbar .nav.pull-right {
    float:right !important;
  }
  .navbar .nav > li {
    float: left !important;
  }
  .navbar .nav > li > a {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
  }
  .container-fluid {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
</style>
<link rel="stylesheet" href="css/bootstrap-responsive.min.css">
<link rel="stylesheet" href="css/style.css">
<script src="js/libs/modernizr-2.5.3-respond-1.1.0.min.js"></script>
</head>
<body>
<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
      <ul class="nav pull-right">
        <li><a href="#" class="btn btn-large btn-inverse"><i class="icon-home icon-white"></i></a></li>
        <li><a href="#" class="btn btn-large btn-inverse"><i class="icon-map-marker icon-white"></i></a></li>
        <li><a href="#" class="btn btn-large btn-inverse" data-toggle="collapse" data-target=".nav-collapse"><i class="icon-thumbs-up icon-white"></i></a></li>
        <li><a href="tel:" class="btn btn-large btn-inverse"><i class="icon-bell icon-white"></i> Call Now</a></li>
      </ul>
      <div class="nav-collapse">
        <!--facebook like box-->
      </div>
    </div>
  </div>
</div>
<div class="container-fluid">
  <div class="row-fluid">
    <div class="span6 half">
      <img src="/img/logo.png" width="120" />
    </div>
    <div class="span6 half">
      <a class="btn btn-large" href="#" style="width:80%;"><i class="icon-map-marker"></i> Find Location</a><br />
      <a class="btn btn-large" href="tel:" style="width:80%;"><i class="icon-bell"></i> Call Now</a>    
    </div>
  </div>
  <div class="row-fluid">
    <div class="span12">
      <ul class="nav nav-tabs nav-stacked" style="width:100%">
        <li>
          <a href="#" data-toggle="collapse" data-target="#repair-nav"><strong>Garage Door Repair</strong> <i class="icon-chevron-down" id="repair-nav-arrow" style="float:right"></i></a>
          <div id="repair-nav" class="collapse">
            <ul class="nav nav-tabs nav-stacked" style="width:100%">
              <li><a href="#"><i class="icon-wrench"></i> Garage Door Repair <i class="icon-chevron-right" style="float:right"></i></a></li>
              <li><a href="#"><i class="icon-wrench"></i> Garage Door Spring Repair <i class="icon-chevron-right" style="float:right"></i></a></li>
              <li><a href="#"><i class="icon-wrench"></i> Garage Door Opener Repair <i class="icon-chevron-right" style="float:right"></i></a></li>
            </ul>
          </div>
        </li>
        <li>
          <a href="#" data-toggle="collapse" data-target="#doors-nav"><strong>Garage Doors</strong> <i class="icon-chevron-down" id="doors-nav-arrow" style="float:right"></i></a>
          <div id="doors-nav" class="collapse">
            <ul class="nav nav-tabs nav-stacked" style="width:100%">
              <li><a href="#"><i class="icon-align-justify"></i> Garage Doors <i class="icon-chevron-right" style="float:right"></i></a></li>
              <li><a href="#"><i class="icon-align-justify"></i> Garage Door Designer <i class="icon-chevron-right" style="float:right"></i></a></li>
              <li><a href="#"><i class="icon-align-justify"></i> Commercial Garage Doors <i class="icon-chevron-right" style="float:right"></i></a></li>
            </ul>
          </div>
        </li>
        <li>
          <a href="#" data-toggle="collapse" data-target="#openers-nav"><strong>Garage Door Openers</strong> <i class="icon-chevron-down" id="openers-nav-arrow" style="float:right"></i></a>
          <div id="openers-nav" class="collapse">
            <ul class="nav nav-tabs nav-stacked" style="width:100%">
              <li><a href="#"><i class="icon-arrow-up"></i> Garage Door Openers <i class="icon-chevron-right" style="float:right"></i></a></li>
              <li><a href="#"><i class="icon-arrow-up"></i> Garage Door Opener Repair <i class="icon-chevron-right" style="float:right"></i></a></li>
            </ul>
          </div>
        </li>
        <li><a href="#"><strong>Locations</strong> <i class="icon-chevron-right" style="float:right"></i></a></li>
      </ul>
    </div>
  </div>
  <div class="row-fluid">
    <div class="span12">
      <ul class="nav nav-tabs" id="home-tabs">
        <li class="active"><a href="#repair"><i class="icon-wrench"></i> <span>Garage Door Repair</span></a></li>
        <li><a href="#doors" id="doors-tab"><i class="icon-align-justify"></i> <span style="display:none;">Garage Doors</span></a></li>
        <li><a href="#openers"><i class="icon-arrow-up"></i> <span style="display:none;">Garage Door Openers</span></a></li>
        <li><a href="#locations"><i class="icon-map-marker"></i> <span style="display:none;">Locations</span></a></li>
      </ul>
      <div class="tab-content">
        <div class="tab-pane active" id="repair">
          <!--repair content-->
        </div>
        <div class="tab-pane" id="doors">
          <!--doors content-->
        </div>
        <div class="tab-pane" id="openers">
          <!--openers content-->
        </div>
        <div class="tab-pane" id="locations">...</div>
      </div>
    </div>
  </div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.2.min.js"><\/script>')</script>
<script src="js/libs/bootstrap/bootstrap.min.js"></script>
<script src="js/script.js"></script>
<script>
$('.collapse').on('shown', function () {
    $('#' +  $(this).attr('id') + '-arrow').toggleClass('icon-chevron-down');
    $('#' +  $(this).attr('id') + '-arrow').toggleClass('icon-chevron-up');
});
$('.collapse').on('hidden', function () {
    $('#' +  $(this).attr('id') + '-arrow').toggleClass('icon-chevron-up');
    $('#' +  $(this).attr('id') + '-arrow').toggleClass('icon-chevron-down');
});
$('#home-tabs a').click(function (e) {
  e.preventDefault();
  $(this).tab('show');
  $(this).find('span').show();
});
$('#home-tabs a').on('shown', function (e) {
  $("span",$(e.relatedTarget)).hide();
});
</script>
</body>
</html>

Upvotes: 1

Views: 1095

Answers (1)

PlayGod
PlayGod

Reputation: 366

I had this same issue when using html,body{overflow-x:hidden;}

This a hack to prevent side scrolling when backgrounds are wider than the screen. It worked on every platform and browser except Android 2.x devices.

Changing to html{overflow-x:hidden;} solved it for Android... but not for others.

Upvotes: 1

Related Questions