datatable-body recalculating height each data update

[am74po]

I'm submitting a ... (check one with "x")

[ x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, post on Stackoverflow or Gitter

Current behavior

Table's height keep increasing each data modified

Expected behavior

Table height (datatable-body) stays the same

Reproduction of the problem

Data (rows) is updated each few seconds. Each such update - the height of the table's body increasing: ng-reflect-body-height="524.671875" style="width: 100%; height: 524.672px;"

What is the motivation / use case for changing the behavior?

As the data needs to be refreshed - table's height should not change.

Please tell us about your environment:

Win

• Table version:

  14.0.0

• Angular version:

  6.1

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

• Language: [all | TypeScript X.X | ES6/7 | ES5]

[vaibhavvp23]

I am facing the same issue. I am using server side sorting. After every sort, the 'ng-reflect-body-height' increases by 1px. Any solution for this?

[abierbaum]

What I am seeing is that everytime I call recalculate() on the table, it gets 1px taller. This is causing some resize detection we use to spin out of control. :(

[tmburnell]

This issue seems to be new to the latest version of chrome. Version 75 did not do this, however version 76 is.
Also it appears that the calculation will not ever shrink but will only grow.

[abierbaum]

@tmburnell Any workaround you know?

[tmburnell]

I am still researching it. The code calls element.getBoundingClientRect() to get the dimensions of the container. The 1px growing problem might be caused by what this describes: https://stackoverflow.com/questions/40784108/difference-in-computed-height-in-firefox-and-chrome

However the not shrinking issue seems to be how chrome calculates the clientHeight. Which seems to always include the style height defined on datatable-body (which it did not before).

I have thought about adding code to listen for window resize, and strip off the datatable-body style height ... but i am not quite sure i want to add this hack.

[tmburnell]

The fix i think i am going to use is like this: https://github.com/swimlane/ngx-datatable/blob/master/demo/basic/fullscreen.component.ts

So they use this

.fullscreen {
    position: absolute !important;
    height: auto !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
}

I am going to wrap my table with a container that is the size i want (and position relative) then put the grid in that. This appears to work

[abierbaum]

@tmburnell Thanks for the pointer. Just tried it and this works out for me as well. A bit of a pain, but atleast the code is working again.