So, I've been working on a web application. Actually it is one that I 'finished' over a year ago but never ended up deploying for various reasons. Once Titlz was released I wanted to get back to Rails and web development; it is just so much more fun than iOS development.

In the process of updating and polishing my web app I decided to give Twitter Bootstrap a look. You can't do much work in the web world without hearing a lot about Twitter Bootstrap. People love it, people hate it, whatever.

After a week of use I have to say I really like it. As a solo developer with limited resources Twitter Bootstrap provides a huge base of functionality to work with.

I did run into a strange problem while I was converting my code to use Bootstrap. I saw that some other people have had the same problem and there didn't seem to be an acceptable answer around the internet. It took me a while of poking around with my code but I finally figured out what the problem was and I thought I'd share it in case anyone else finds it useful.

What happened was the vertical scroll bar for the entire page would not show up. I have a fair amount of test data in my development database so the page always has a scroll, but after switching over to Twitter Bootstrap the scroll bar disappeared. I could see the data was still in the DOM, I just couldn't scroll down the page at all.

It is a very frustrating problem because there are no errors, no warnings, no apparent reason for things not to be working correctly. I did find one question on Stackoverflow that suggested the problem was with the navigation bar.

If you want the Twitter Bootstap navigation bar to be anchored at the top of the page you have to add the navbar-fixed-top CSS class to your navbar. This adds a position: fixed; rule to the navbar. The answer in the Stackoverflow question stated that if you remove the position: fixed; rule then the vertical scroll bar would reappear.

I tried that solution and it did indeed fix the scroll bar problem, but it also introduced another. The navbar was no longer fixed at the top of the page. I tried using a negative margin on the navbar to force it back to the top but that didn't do any good and was a hack anyway.

I didn't think the issue was really related to the position: fixed; CSS rule. Other people were using a fixed top navbar without having to tweak CSS rules.

I poked and prodded and moved things around. I knew it had to be something simple and it was probably staring me right in the face. Then suddenly I saw it. All of my page content was somehow wrapped up inside the navbar.

The standard Twitter Bootstrap navbar example looks like:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<html>
<head>
  <title></title>
</head>
<body>
  <div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
      <div class="container">
        <ul class="nav"></ul>
      </div>
    </div>
  </div>
  <!-- Page Content -->
</body>
</html>

I was looking at my page DOM in the Developer Tools when I noticed that my page structure was actually:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<html>
<head>
  <title></title>
</head>
<body>
  <div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
      <div class="container">
        <ul class="nav"></ul>
      </div>
    <!-- Page Content -->
    </div>
  </div>
</body>
</html>

That's right, my entire page was actually wrapped up inside the navbar. I had changed a nav element in my header to a div in converting my page, but I forgot to change to closing nav to a closing div. This threw off the page structure and essentially made the entire page fixed to the top along with the navbar.

So, if you see strange vertical scrolling issues with Twitter Bootstrap make sure to double check your page structure and make sure all of your div's are closed.