Unnecessary Horizontal Scrollbar in AngularJS/Bootstrap application

I am trying to create an application using bootstrap and angularjs as practice and a simplified version of my application is illustrated in this pen: http://codepen.io/megadeen/pen/ZWrGmv

This is the main code:

<table class="main" ng-app="app" ng-controller="main">
  <tr>
    <td class="sidebar">
      <!-- Set page using AngularJS -->
      <a ng-click="page = 'fpage'">First Page</a>
      <br>
      <a ng-click="page = 'spage'">Second Page</a>
    </td>
    <td class="content">
      <!-- First Page -->
      <div class="fpage" ng-show="page == 'fpage'">
        <div class="col-md-5">
          .... Content ....
        </div>
      </div>
      </div>
      <!-- Second Page -->
      <div class="spage" ng-show="page == 'spage'">
        <div class="row">
          <div class="col-md-7">
            .... Content ....
          </div>
        </div>
    </td>
  </tr>
</table>

However, there's always this stray horizontal scrollbar that won't go away. This stray scrollbar only appears in the second and subsequent pages.

I tried adding the row class to the fpage and spage divs. However, if I do so, then the scrollbar appears in all pages.

Why does this happen and how do I correct this problem?

Answers


You should use col-md-12 instead of row.


Need Your Help

Dynamically create WIX files without having to edit the wix files manually

windows automation wix wix3

Suppose you release the next version of your software, you will have to manually update your WIX files to remove obsolete files and add new files, etc.

How to compare two Hashes so to return true if both Hashes have same keys/values?

ruby-on-rails ruby ruby-on-rails-3 hash compare

I am using Ruby on Rails 3.2.2 and Ruby 1.9.3. I would like to compare two Hashes (A and B) so to return true if a Hash (A) include all keys/values of the other Hash (B).