0

I have a virtual scroll element within an Angular Material Sidenav but it seems this causes the virtual scroll to render incorrectly. I suspect that because the scroll is created "off screen" it does not know the final height? I have tried previously to hook up events to force the checkViewportSize but no change. Chanegs to css also dont have an effect.

The effect of the issue is that the virtual scroll item creation happens almost at the top of the list and therefore the list contains only a few items. Changing the window size seems to trigger some kind of refresh which fixes the display so no idea what happens enter image description here

I have been able to recreate with this stackblitz any help would be appreciated.

https://stackblitz.com/edit/angular-du6x1x

Mad Eddie
  • 943
  • 3
  • 12
  • 23

1 Answers1

-1

Problem is this line : cdk-virtual-scroll-viewport itemSize="72"

Your "itemSize" is too much. I reduced it to 20 and then 10,in your Stackblitz code and then it is working fine.

Prakash
  • 24
  • 3
  • Could you tell me why? ItemSize should be the size in Pixels of an item. I set this to match the CSS height value. I fear this is masking the issue rather than solving it – Mad Eddie Jul 25 '22 at 09:54
  • I think itemSize is not the size of item in pixel..it is amount of list item to render.. and since you have given 72.. on scroll browser is trying to render 72 items and thats why lagging.. you can read more from material doc: https://material.angular.io/cdk/scrolling/overview – Prakash Jul 25 '22 at 15:54
  • This is just wrong, itemSize is in fact the size in pixels of the list item. Docs: https://material.angular.io/cdk/scrolling/api#CdkFixedSizeVirtualScroll – Ivo Udelsmann Aug 02 '23 at 19:15