Bukic Bukic - 7 days ago 4
AngularJS Question

Add vertical scroll in table row

What I need is to add vertical scroll for example if height is more than 200px. I tried with some solutions to wrap up

<tr>
in
<div>
tag and add overflow-y.. but no success. I also tried to add directly vertical scroll to table but I only need scroll in
<tr>
for checkboxes not for whole table. Below is my code and what I tried:

HTML

<script type="text/ng-template" id="field_renderer.html">
<table class="table table-scroll">
<thead ng-show="data.name === 'Location'">
<td class="noBorder" colspan="2">
<button data-ng-click="reportsvm.changeLocation(data, true)" data-ng-class="" class="btn btn-default btn-sm">
Regions</button>
<button data-ng-click="reportsvm.changeLocation(data, false)" data-ng-class="" class="btn btn-default btn-sm pull-right">
State/Territory</button>
</td>
</thead>
<tbody>
<tr ng-if="data.children.length > 0 && !$parent.$parent.$parent.data">
<td class="noBorder" colspan="2">
<a href="javascript:;" class="btn btn-default-off btn-xs select-all" data-ng-click="reportsvm.selectAll(data)">Select All</a>
<a href="javascript:;" class="btn btn-default-off btn-xs reset-all" data-ng-click="reportsvm.clearAll(data)">Clear All</a>
</td>
</tr>
<tr ng-repeat-start="data in data.children">
<td class="noBorder">
<label>
<input type="checkbox" value="{{data.name}}" ng-change="reportsvm.changeValue(data, $parent.$parent.$parent)" ng-model="data.isSelected">
<span class="clickable">{{data.name}}</span>
</label>
</td>
<td class="noBorder clickable">
<span ng-if="data.children.length > 0">
<i data-ng-click="reportsvm.showChildDetails(data, $parent.$parent.$parent)" ng-class="{'glyphicon glyphicon-chevron-right': !data.showDetails, 'glyphicon glyphicon-chevron-down': data.showDetails}"></i>
</span>
</td>
</tr>
<tr ng-repeat-end ng-if="data.showDetails">
<td class="noBorder" ng-include="'field_renderer.html'"></td>
</tr>
</tbody>
</table>
</script>
<div class="panel-group">
<div class="panel panel-default">
<div ng-repeat-start="data in reportsvm.modifiedFilters" class="panel panel-default">
<div class="panel-heading clickable" data-ng-click="reportsvm.showDetails(data)">
<h4 class="panel-title">
<a href="">{{data.name}}</a>
<i ng-class="{'pull-right glyphicon glyphicon-plus': !data.showDetails, 'pull-right glyphicon glyphicon-minus': data.showDetails}"></i>
</h4>
</div>
</div>
<div class="panel-body small" ng-if="data.showDetails" ng-repeat-end ng-include="'field_renderer.html'"></div>
</div>


CSS

.table-scroll {
display: block;
height: 200px;
overflow-y: scroll;
}


RESULT

Result

So I want scroll to be only after selectAll/Clear All buttons not whole body.

DATA

[{
"name": "Location",
"showRegions": true,
"children": [{
"isSelected": true,
"name": "New Jersey",
"category": "NERO"
}, {
"isSelected": true,
"name": "Pennsylvania",
"category": "MARO"
}, {
"isSelected": true,
"name": "Connecticut",
"category": "NERO"
}, {
"isSelected": true,
"name": "Delaware",
"category": "MARO"
}]
}, {
"name": "Review Status",
"children": [{
"isSelected": true,
"name": "Planned",
"children": []
}, {
"isSelected": true,
"name": "Pre-Review",
"children": []
}, {
"isSelected": true,
"name": "Field Work Conducted",
"children": []
}]
}]


PLUNKER

https://plnkr.co/edit/CKZ9DeHee4pk7GUjVim2?p=preview

Answer

Wrapping checkboxes in different rows , assigning height and overflow to it , may not work.

It would be great if you wrap all your checkbox in a container element and assign the same to it.

A simple codepen link I have created here.

Link

HTML:

<table>
  <tr>
    <td>Table Header</td>
    <td>Table Header</td>
  </tr>
  <tr>
  <td colspan="2">
     <div>
       Your all check box here
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia repellat voluptas, alias, culpa rerum voluptate cupiditate tenetur vitae maiores consequuntur tempora hic error, commodi soluta officiis eaque magnam doloremque illo.
    </div>
    </td>
  </tr>
</table>

CSS:

div{
  max-width:200px;
  height: 100px;
  overflow-y:scroll;
}
Comments