I have a question. I didnt find any familiar question on stack so i asking here, is it possible to make <mat-selection-list>
scrollable (Angular 7)? I want to display scroll-bar on the right when items are too many to fit a window.
<mat-card fxFlex="33%">
<mat-selection-list>
<mat-list-item
*ngFor="let product of products"
[class.selected]="product === selectedproduct"
(click)="onSelect(product)"
>
</mat-list-item>
</mat-selection-list>
Virtual Scrolling can be easily implemented with MatList by adding cdk-virtual-scroll-viewport directive inside mat-list component. Make sure ScrollingModule will have to be imported in your module.
cdkScrollable and ScrollDispatcher The cdkScrollable directive and the ScrollDispatcher service together allow components to react to scrolling in any of its ancestor scrolling containers. The cdkScrollable directive should be applied to any element that acts as a scrolling container.
Virtual scrolling allows the Grid component to display thousands of records on a single page. You can use this feature as an alternative to paging. Browser Support Notes: The following browsers do not support virtual scrolling because they do not support position: sticky : Android Browser before 5.0.
Simple CSS
mat-selection-list {
max-height: 400px;
overflow: auto;
}
StackBlitz Demo
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With