search

diprokon / ng-table-virtual-scroll

Virtual Scroll for Angular Material Table
https://diprokon.github.io/ng-table-virtual-scroll
MIT License
134 stars 42 forks source link

Rows not shown if the table is initially hidden #75

Closed gonzo09 closed 2 years ago

gonzo09 commented 2 years ago

Hello,

When the table is initally hidden with CSS (display:none) and displayed programmaticaly, the rows are not shown unless you force the re-rendering (by changing windows size for example).

See the following Stackblitz for an example: https://stackblitz.com/edit/angular-rdotb9?file=src/app/base-example.component.ts

If you change value of hideCdkVS to false, it will works fine but if it's hidden by default (hideCdkVS = true;) and then you click on the show button, the table will be rendered but not the rows. If you then change the size of the window, the rows will be rendered.

thonythony commented 2 years ago

Hello, I have same issue. What's the status ?

riccardovezzini commented 2 years ago

To get around the issue you could trigger a fake window resize event when showing the table. something like window.dispatchEvent(new Event('resize'));

diprokon commented 2 years ago

Hi! It looks like CdkVirtualScrollViewport's behavior. You have to trigger viewport.checkViewportSize() on every manual viewport height change (maybe even wrapped with setTimeout).

As I understand, viewport listens resize event, so the @riccardovezzini 's workaround also should help