AngularJS: Bootstrap scrollable table, heigh to row

Datetime:2016-08-22 22:19:41          Topic: Bootstrap  AngularJS           Share

I really did a lot of research, but i couldn't find an answer that is suitable for my case.

In every answer i found so far I would have to set a fixed height for the table and i would really like to avoid that..

when building an app with bootstrap and angularjs and there is the following grid:

the two tables to be scrollable independently if the overflow the height of the row.

The bottom row of the grid should take up the remaining screen space, and never overflow the screen.

It would be awesome if its possible to fix the headers of the tables.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row">

<div class="col-sm-3">

text

<br>

<br>text

</div>

<div class="col-sm-6">

text

<br>

<br>text

</div>

<div class="col-sm-3">

text

<br>

<br>text

</div>

</div>

<div class="row">

<div class="col-sm-6">

<table class="table table-striped">

<thead>

<tr>

<th>table1 head</th>

</tr>

</thead>

<tbody>

<tr>

<td>123</td>

</tr>

<tr>

<td>123</td>

</tr>

<tr>

<td>123</td>

</tr>

<tr>

<td>123</td>

</tr>

<tr>

<td>123</td>

</tr>

<tr>

<td>123</td>

</tr>

<tr>

<td>123</td>

</tr>

<tr>

<td>123</td>

</tr>

<tr>

<td>123</td>

</tr>

<tr>

<td>123</td>

</tr>

<tr>

<td>123</td>

</tr>

<tr>

<td>123</td>

</tr>

<tr>

<td>123</td>

</tr>

<tr>

<td>123</td>

</tr>

<tr>

<td>123</td>

</tr>

<tr>

<td>123</td>

</tr>

<tr>

<td>123</td>

</tr>

<tr>

<td>123</td>

</tr>

<tr>

<td>123</td>

</tr>

</tbody>

</table>

</div>

<div class="col-sm-6">

<table class="table table-striped">

<thead>

<tr>

<th>table2 head</th>

</tr>

</thead>

<tbody>

<tr>

<td>456</td>

</tr>

<tr>

<td>456</td>

</tr>

<tr>

<td>456</td>

</tr>

<tr>

<td>456</td>

</tr>

<tr>

<td>456</td>

</tr>

<tr>

<td>456</td>

</tr>

<tr>

<td>456</td>

</tr>

<tr>

<td>456</td>

</tr>

<tr>

<td>456</td>

</tr>

<tr>

<td>456</td>

</tr>

<tr>

<td>456</td>

</tr>

<tr>

<td>456</td>

</tr>

<tr>

<td>456</td>

</tr>

<tr>

<td>456</td>

</tr>

<tr>

<td>456</td>

</tr>

<tr>

<td>456</td>

</tr>

<tr>

<td>456</td>

</tr>

<tr>

<td>456</td>

</tr>

<tr>

<td>456</td>

</tr>

<tr>

<td>456</td>

</tr>

<tr>

<td>456</td>

</tr>

<tr>

<td>456</td>

</tr>

</tbody>

</table>

</div>

</div>

Fiddle

Solution :

when not sure if the following solves the problem. But I had same issue and I used a list view instead because its a little complicated to have fixed headers in table. As far as I know, you have to set max-height for scroll.

What I did was following. See if this can be a solution

<div class="container" style="width:85%">

<ul class="list-group" style="margin-bottom:2px">

<li class="list-group-item listHeading">

<span class="col-sm-1">Sr No.</span>

<span class="col-sm-1">Order ID</span>

</li>

</ul>

<ul class="list-group" style="overflow-y:scroll;max-height:400px">

<li class="list-group-item" style="" ng-repeat="order in orders">

<span class="col-sm-1">{{$index + 1}}</span>

<span class="col-sm-1">{{order.Key}}</span>

</span>

</li>

</ul>

</div>

<style>

.listHeading {

padding-top: 0.5%;

padding-bottom: 2%;

}

</style>





About List