0

I try to implement a Sidenav that contains a list of Angular Material Expansion Panels. When I'm using the ngFor-directive the layout looks fine, just as I want it. As you can see in the image, it expands the view to 100% of the width of the Expansion-Panel-content. Layout using ngFor-directive.
Stackblitz of how it looks with ng-For-directive: https://stackblitz.com/edit/angular-ivy-fwav88?file=src/app/app.component.ts

Since there will possibly be thousands of items in the list I want to increase the performance using CDK virtual Scroll.

But using this, I was not able to set the width of the list to 100%. Instead, there is a horizontal scroll bar.

How it looks with virtual scroll.

Stackblitz of the Code with virtual scroll: https://stackblitz.com/edit/angular-ivy-xr5bok?file=src/app/sidenav/sidenav.component.html

I tried to use flexbox and every other CSS-Tricks I know but without any success.

I would be really grateful for the help.

Thanks!

user16192538
  • 11
  • 3
  • Virtual scrolling means not all items are rendered at all times, which means the "automatic width" would constantly change as you scroll through the list. You need to either know the exact width upfront, or you'd have to live with the fact that the sidenav keeps changing size as you scroll. – Ingo Bürk Jun 19 '21 at 21:12
  • Even this would be okay, but how can i achive it to adapt to the width of the content? From this i could go on and look fot the "perfect" solution. Thank you! – user16192538 Jun 19 '21 at 21:17

1 Answers1

0

Give width to mat-sidenav

<mat-sidenav position="end" mode="side" [opened]="sidenavOpen" 
style="width:50%;">
Sanjay Choudhary
  • 349
  • 4
  • 8
  • Thanks for answering! Eventhough this solves the problem for many situations, it still does not adapt to the width of the sidenav-content. For example: on desktop-devices the sidenav is now too wide. – user16192538 Jun 13 '21 at 08:35