1

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

Improve this question

1 Answer 1

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

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
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: material.angular.io/cdk/scrolling/overview
This is just wrong, itemSize is in fact the size in pixels of the list item. Docs: material.angular.io/cdk/scrolling/api#CdkFixedSizeVirtualScroll

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.