CODEWITHSUNDEEP
htmlangularangular-materialangular-material2
michasaucer
michasaucer

Reputation: 5228

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>

Upvotes: 12

Views: 22767

Answers (3)

Prashant Pimpale
Prashant Pimpale

Reputation: 10697

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>

StackBlitz Example

Upvotes: 6

Oen44
Oen44

Reputation: 3206

Simple CSS

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

StackBlitz Demo

Upvotes: 18

jaaso
jaaso

Reputation: 1405

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>

Upvotes: 3

Related Questions