Angular scrollable mat-selection-list?
15,182
Solution 1
Simple CSS
mat-selection-list {
max-height: 400px;
overflow: auto;
}
Solution 2
By setting custom CSS properties?
CSS for fancy scroll bar which only supports Chrome browsers:
.custom-scroll-bar{
height:70vh;
overflow-y:scroll;
overflow-x: hidden;
}
.custom-scroll-bar::-webkit-scrollbar{
width: 5px;
}
.custom-scroll-bar::-webkit-scrollbar-thumb{
background: rgba(0,0,0,.26);
}
For Firefox and Internet explorer just simply use:
.custom-scroll-bar{
height:70vh;
overflow-y:scroll;
}
HTML:
<mat-selection-list #shoes class="custom-scroll-bar">
<mat-list-option *ngFor="let shoe of typesOfShoes">
{{shoe}}
</mat-list-option>
</mat-selection-list>
Solution 3
You can try with:
<mat-card fxFlex="33%">
<mat-selection-list [style.overflow]="'auto'" [style.height.px]="'300'">
<mat-list-item
*ngFor="let product of products"
[class.selected]="product === selectedproduct"
(click)="onSelect(product)">
</mat-list-item>
</mat-selection-list>
Author by
michasaucer
Updated on June 12, 2022Comments
-
michasaucer about 2 years
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>
-
piccy about 4 yearsWhy 400px? Is it possible to make the list fill its parent, instead of cutting it off at a certain place?
-
Oen44 about 4 years@piccy You have to set height somewhere, otherwise there will be no scrollbar.