Bootstrap responsive table not working with angular js ng-view in partial panel

Question

I have an application in which I load html by routeProvider of angular js. In one of the html's i further include htmls based on a ng-switch. in the child html i have panels with table. I want to make those table to be responsive, but somehow even after embedding the table in a div with class table-responsive I don't see the table to fit into the div.

<script>
 myapp.config(['$routeProvider', function($routeProvider) {
      $routeProvider.
      when('/summary',{
        templateUrl: 'templates/summary.html',
        controller: 'SummaryController'
      }).
      when('/vms', {
        templateUrl: 'templates/widgets.html',
        controller: 'WidgetController'
      }).
      otherwise({
        redirectTo: '/summary'
      });
    }]);
</script>

Further in widgets.html i have the following code.

<div ng-repeat="widgetData in widgets" class="col-lg-4" >
    <div ng-switch on="widgetData.widgetType">
        <div ng-switch-when="chart">
            <div ng-include="'templates/chart.html'"></div>
        </div>
        <div ng-switch-when="number">
            <div ng-include="'templates/number.html'"></div>
        </div>
        <div ng-switch-when="table">
            <div ng-include="'templates/table.html'"></div>
        </div>
    </div>
</div>

In tables.html I have following markup

    <div class="panel panel-primary">
    <!-- Default panel contents -->
    <div class="panel-heading">Panel heading</div>
    <div class="panel-body">
        <!--table-->
        <div class="table-responsive">
            <table class="table table-condensed table-hover table-bordered">
                <thead>
                    <tr>
                        <th>Heading 1</th>
                        <th>Heading 2</th>
                        <th>Heading 3</th>
                        <th>Heading 4</th>
                        <th>Heading 5</th>
                    </tr>
                </thead>
               <tbody>
                    <tr>
                        <td>Content 1</td>
                        <td>Content 2</td>
                        <td>Content 3</td>
                        <td>Content 4</td>
                        <td>Content 5</td>
                    </tr>
                    <tr>
                        <td>Content 1</td>
                        <td>Content 2</td>
                        <td>Content 3</td>
                        <td>Content 4</td>
                        <td>Content 5</td>
                    </tr>
                    <tr class="danger">
                        <td>Content 1</td>
                        <td>Content 2</td>
                        <td>Content 3</td>
                        <td>Content 4</td>
                        <td>Content 5</td>
                    </tr>
                </tbody>                    
            </table>
        </div>
        <!--end of table-->
    </div>
</div>

First thing I would do is eliminate possible conflicts. If you call `tables.html` instead of `widgets.html` from your Angular routes, does the table render how you expect? If so, then it is probably an Angular issue. If not, then it is not an Angular issue, and probably a Bootstrap issue (or CSS override issue). Right, now you have too many factors that could be causing the problem, and it makes it hard to debug. You need to dwindle it down a bit and find out where the issue actually lies. Also, potentially try it in a different browser. — Mike McLin, Jun 18 '14 at 04:30
it's something like angularjs doesn't evaluate bootstrap.js in ng-view template. (If you remove it all out from ng-view and put it into simple .html file, it should be working) I think i ran into same problem, did you find any solution ? — Victor, Aug 10 '14 at 15:03

score 0 · Accepted Answer · answered Dec 20 '15 at 00:36

The class in question:

table-responsive

does not do what you expect. It has the following rules:

.table-responsive {
  min-height: .01%;
  overflow-x: auto;
}
@media screen and (max-width: 767px) {
  .table-responsive {
    width: 100%;
    margin-bottom: 15px;
    overflow-y: hidden;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    border: 1px solid #ddd;
  }

Which do nothing to shrink the table to fit the container.

Bootstrap responsive table not working with angular js ng-view in partial panel

1 Answers1