How to add scroll bars to a dynamic table with multiple tbodys - css

Question

I am facing a complicated table design. I need to create a table with possible multiple tbodys. just like this:
As you can see, each tbody is for a date. and I need to add as many row as I want by clicking '+' icon for EACH date. and also can remove each row by clicking '-' icon. Now this is what I have done, but the new requirement is I need to add scroll bar for EACH tbody! (not for all table) each date(tbody) will show a scroll bar if I create more than 3 rows. as you can see, if I click '+' icon for date 01/08/2016, the scroll will appear on the right side of that tbody(only for this date leave other days alone.) How can I do it.
Here is my html:
<table class="table expensetable">
<thead>
<tr>
<th ng-hide="lodging.roomSameForAllDays">Date</th>
<th>Expense Type</th>
<th>Amount</th>
<th>Reimbursement</th>
<th ng-hide="lodging.sameDescriptionForAll">Description</th>
<th></th>
</tr>
</thead>
<tbody ng-repeat="day in lodging.roomData" ng-class="{'scroll-bar':getExpenseLength(day)}">
<tr ng-repeat-start="expense in day" class="ecom-components" ng-repeat-end>
<td ng-show="!lodging.roomSameForAllDays && ($index == 0)"
rowspan="{{day.length + 1}}"
style="vertical-align: top;">{{indexToDate($parent.$index) | date : companyDateFormat}}</td>
<td>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle clearfix" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="dropdown-label pull-left">{{expense.expenseType.expenseTypeName}}</span>
<span class="caret pull-right"></span>
</button>
<ul class="dropdown-menu">
<li ng-repeat="exp in roomRateTaxExpenseList | orderBy:'expenseTypeName'"><a href="javascript:void(0)"
ng-click="expense.expenseType = exp">{{exp.expenseTypeName}}</a></li>
<li></li>
</ul>
</div>
</td>
<td><input type="text" ecom-amount ng-model="expense.amount"></td>
<td>
<div class="dropdown" style="width:100%">
<button class="btn btn-default dropdown-toggle clearfix" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="dropdown-label pull-left">{{RNP_STATUSES[expense.rnp]}}</span>
<span class="caret pull-right"></span>
</button>
<ul class="dropdown-menu">
<li>Yes</li>
<li>No</li>
<li>Personal</li>
<li></li>
</ul>
</div>
</td>
<td ng-hide="lodging.sameDescriptionForAll"><input type="text" ng-model="expense.description"></td>
<td><span class="whitebutton remove" ng-click="deleteRow('roomData', $parent.$index, $index)"></span></td>
</tr>
<tr>
<td colspan="5"><span class="whitebutton add" ng-click="addRow('roomData', $index)"></span></td>
</tr>
</tbody>
</table>
Thanks in advance.
Here is what I have tried to, it is close but still didn't 100% match the requirement:
table.expensetable{
width:100%;
thead{
display:table;
width:100%;
}
tbody {
max-height:240px;
display:block;
tr{
display:table;
width:100%;
}
}
}
post js for more information:
$scope.getExpenseLength = function(day){
var isScroll = false;
if(day.length>3){
isScroll = true;
}else{
isScroll = false;
}
return isScroll;
}
As you can see, I can add scroll-bar to each tbody( which is cool) but the rowspan, doesn't work after scroll-bar appear or disappear. any update I need here?

Answer 1

We have done similar kind of thing in one of our project like below
var abc = $scope.$watch('grid.gridModel.data.data.items.length', function (newValue, oldValue) {
if (newValue > 4) { //grid should show a scrollbar after 3 rows
$scope.grid.gridOptions.autoheight = false;
if ($scope.grid.stateModel.gridObj) {
$($scope.grid.stateModel.gridObj.element).jqxGrid('height', '124px');
$($scope.grid.stateModel.gridObj.element).jqxGrid('refresh');
}
} else {
$scope.grid.gridOptions.autoheight = true;
if ($scope.grid.stateModel.gridObj) {
$($scope.grid.stateModel.gridObj.element).jqxGrid('height', 'auto');
$($scope.grid.stateModel.gridObj.element).jqxGrid('refresh');
}
}
});
Here what we are doing is, we are fixing the height of the grid if it contains more then 3 rows else it is of autoheight.
In your case if you can count number of rows in addRow( & deleteRow( function then you can also set height/max-height of the table. You might need to set overflow-y:auto while fixing the height.
Hope this helps.