I have a list of customers coming from the backend that I need to populate into ng-repeat. However, even though there are more customers, the vertical scroll is not visible. Why is that?
<link rel="stylesheet" href="hike.css">
<div ng-show='isLoading' class="row">
<div class="col-mg-12 hike-container">
<div class="panel-body">
<div class="table-responsive">
<table class="hike table table-hover tab-panel tab-content">
<thead>
<tr>
<th>
<span>Customer Id</span>
</th>
<th>
<span>Email</span>
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="customer in customers" ng-class-odd="'odd'" ng-class-even="'even'">
<td>{{customer.id}}</td>
<td>{{customer.email}}</td>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
hike.css
div.lhike-container .lhike{
background-color: white;
padding: 0px 0px;
border-style: solid;
border-width: 1px 1px 1px 1px;
border-color: #dde6e9;
}
th {
background: rgba(102, 123, 147, 0.14);
text-align: center;
}
tbody > tr.odd{
background: #FAFBFC;
}
tbody > tr > td {
text-align: center;
height: 52px;
vertical-align: middle;
}
Controller
(function(){
'use strict';
angular
.module('app')
.controller('CustController', CustController);
CustController.$inject = ['$scope', 'customerService'];
function CustController($scope, customerService,){
$scope.isLoading = false;
customerService.getCustomers.then(function(response){
if(response.data.error === 0){
if(response.data.result.customers){
$scope.customers = response.data.result.customers;
}
}
$scope.isLoading = true;
});
}
})();