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
I have been able to recreate with this stackblitz any help would be appreciated.
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.
- angular 19 - APP_INITIALIZER deprecation
- Accessing an Angular application from devices from same network
- Angular - Issue with routerLink and state
- HTTP GET throws TypeError: Cannot read properties of undefined (reading 'length')
- how to change angular stepper progress color when next step active
- How to set providers in Angular v19 SSR?
- @Output in child component is undefined when trying to emit Angular v17
- Why does instanceof Observable return false in my tests?
- Scrolling disappeared in angular ionic
- Unable to make text bold in SVG
- Consuming multiple properties via @Input() decorator in Angular 2
- How to add a number by pressing the button
- NgIf and zero: Why is the template not being rendered?
- Angular computed signal in component does not update when service signal changes
- How to set CKEditor 5 height
- The callback was already called for LoaderRunner due to bootstrap version ^3.4.1
- HttpContextToken always false while using HttpInterceptorFn
- Why does the navbar not take the theme I am trying to assign
- 'imports' is only valid on a component that is standalone
- NX Unable to complete project graph creation. Worker stopped with exit code: 1
- Angular update 8 to 14 makes [hidden] not working anymore
- Angular 17 - In @if syntax, how to store returned value from a function in a variable and use it in the same @if block
- Angular 18 MatDialog panelClass styles not applying after upgrade from Angular 14
- Angular: ng-content doesn't render with *ngIf then else
- How to change Background Color of mat-chip of Angular Material 18
- How to exclude a library from Angular's cache?
- find function isn't working properly in angular and firebase
- How to get rid of "Imports array contains unused imports(-998113)"
- How can I show elements from an array
- How can I conditionally disable the routerLink attribute?