Not working properly when providing the virtual-scroller height in percentage.

hemangshah commented 4 years ago

Hello Rintoj/Contributors,

First of all, this is a great component I came across since I started hybrid development (March 2020).

The issue I'm facing is with the virtual-scroller (latest version of course)

virtual-scroller {
   width: 100%;
   height: 100%;
}

Setting height in % creating the issue.

Why I'm giving in % ?

because I can't decide the height of the content in pixels so I can't give the height. I may have 1 data or 1000 data. So giving in pxs is not possible.

What problem I'm facing?

As I am setting the height in % it will become actual instead of virtual. So let's say I've 1000 records in my viewPortItems then in developer console (inspection tool) I can see that it loaded all the records at once. As soon as I re-try with giving height in pixels it start working fine but for my case that's perfect.

In my app, I've sticky headers, and different sections, last section contains virtual-scroller and as soon as I scroll the header of virtual-scroller will be at top and then it should load the data virtually. But because of the height is in % it is loading all the data at once. Whether there are 10 records or 10000 records.

I can provide more data on this but this problem is straight forward, for some reason I'm not able to generate this issue in sample project as I was checking Parent Scroll example and it doesn't have the css file, setting the style directly to the virtual-scroller also doesn't help. But in sample project which I've created has this issue.

How virtual-scroller can help me ?

In my understanding, virtual-scroller will surely work when you know the height and width in pixels so in my app at some part it should work fine.

Please let me know if you want more input from me.

Thanks.