Search code examples
angularangular-cdk-virtual-scroll

Angular Material Virtual Scroll height not adjusting correctly

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

Solution

  • 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.