Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular scrollable mat-selection-list?

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>

like image 892
michasaucer Avatar asked Dec 31 '18 12:12

michasaucer


People also ask

How do I make my mat list scrollable?

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.

What is cdkScrollable?

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.

What is virtual scrolling?

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.


1 Answers

Simple CSS

mat-selection-list {
  max-height: 400px;
  overflow: auto;
}

StackBlitz Demo

like image 106
Oen44 Avatar answered Oct 05 '22 23:10

Oen44