Using scrollbarV and Bootstrap makes datatable-body shrink on interaction

[evilstiefel]

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 When using the Bootstrap theme and enabling body-scrolling using scrollbarH without virtualization makes the datatable-body's calculated height shrink on every interaction.

See the provided stackblitz. When e.g. resizing the window, the body will slowly shrink until only header and footer are visible. This also happens when paging through the table (shrinking by a pixel or two per interaction).

Expected behavior I'd expect the table's calculated height to not lead to shrinking of the content until they are invisible.

Reproduction of the problem https://stackblitz.com/edit/angular-uz8cbk

What is the motivation / use case for changing the behavior? When you have a long table and want to keep header and footer in view, scrollbarV needs to be used. In those scenarios, it is unexpected for the table to gradually shrink.

Please tell us about your environment:

• Table version: This is still an issue with the most recent version.

• Angular version: This is also an issue regardless of angular version (tested both with angular7 / datatable_V14 and angular8 / datatable_V15.

• Browser: all browsers available to me (Edge, Firefox, Chrome)

• Language: all

[heyantonvolkov]

Same problem!

Any scroll or click event add 3px height to the "datatable-body" element

[JakeAi]

Same...

[cyberbobjr]

same problem here...

[Flyover-ArtSk]

same.. any news on this?

[evilstiefel]

We "fixed" it with a hack by not using scrollbarH/V in the first place like in the following stackbitz:

https://stackblitz.com/edit/angular-xcsmau?file=src%2Fapp%2Fapp.component.ts

Basically, we set the appropriate height of the container for the datatable elements via CSS ourselves.

There's a bit more logic in the stackblitz for when you need to make the datatable have a height relative to your window size and orientation, so you could strip it down. Relevant code is in ngOnInit.