I have been using ui-grid extensively in many projects. But recently when I used it with a large number of columns, I started facing a weird issue.
Since there are lot many columns (around 50) so if I scroll from initial state to view the columns on right, for some reasons the grid changes overall height by few pixels. It seems that the height gets increased more as I scroll to right. My guess is height changes whenever a new set of columns comes into the visible frame of the grid
This also leads to my horizontal scroll bar being disappeared on scrolling.
Couldn't find any related issue. Has anyone faced it before ? Could I be doing something wrong ?
If this helps, I currently have a width : 120 for each column with minimal configurations. No filter, no sorting yet.
P.S : I am not posting any JS code since I have a huge column Definition and that is pretty all I have for now. However my html look something like this
<div ng-if="rc.dataArrived" class="gridStyle" ui-grid="rc.gridOptions" ui-grid-edit ui-grid-row-edit ui-grid-cellNav ui-grid-resize-columns ui-grid-pagination style="margin-bottom:20px;margin-top:20px;width:99%;padding-bottom: 32px;"></div>
The height was changing because of the long text in few column headers. With a fix width these header were wrapping in multiple lines. There is a padding applied in each header text which further increases the header height resulting in a total increase in height.
I increased the width of each column and now though the height changes, my horizontal scroll remains intact.