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?
You should use col-md-12 instead of row.