search

diprokon / ng-table-virtual-scroll

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

Certain browser zoom-level shows no data #113

Open joerggross opened 1 year ago

joerggross commented 1 year ago

In certain browser zoom levels (175%) an angular data table with virtual scrolling shows no data when new data is set. if you zoom in and out again then the data is shown. I found out that the viewport of the CdkVirtualScrollViewport is 0 although there is space available.

We could fix this by calling viewport.checkViewportSize() in dataLengthsetter of the FixedSizeTableVirtualScrollStrategy:

grafik

Maybe you could consider this change in a new release?

diprokon commented 1 year ago

Hi! Not sure about your issue - I cannot reproduce it.

The data change event and viewport size event are not related, so it's not correct to connect them in this way. Also, the viewport checks his size on zoom change, so it has to be ok

joerggross commented 1 year ago

Hi,

still we have the strange effect of not showing any data. Maybe because we slide in the table during retrieving new data. But the suggested change helps to solve our problem and simply ensures that the viewport has been calculated when new data is available - as far as I understand the code ;-)

It seems that the viewport does always calculate its size correctly if we change zoom actively. But if we start the application with 200% zoom and retrieve new data for an empty table nothing is shown, maybe its because we animate the table to slide from the bottom and the viewprt somehow misses the changes... The same source works correctly with other zoom levels.

I will try to provide a running example to reproduce the effect, but that may take some time....

josephaVMW commented 1 year ago

Hi there - just wanted to mention that I was facing a similar issue and this helped me make some progress. When I first load a table with this directive, no rows are shown. And in fact, no rows are even placed into the DOM. However, as soon as I zoom in or out, the rows immediately appear. Following that lead and using the link you provided, @diprokon, I am able to work around this by invoking checkViewportSize() on a delay after the data is received.

My application is also quite complex, so it might not be possible for me to make a slimmed-down version to demo the issue, but if it is, I will share it here.