CODEWITHSUNDEEP
angular-material
appsofiane
appsofiane

Reputation: 103

How can I customize mat-selection-list as mat-grid-list?

I want to customize mat-selection-list with specific columns. It's easy to specify it using mat-grid-list, but in my case i should to use mat-selection-list or other list-selection type.

But I'm not sure it's possible to divide a mat-selection-list in two columns for example.

I developed some code here better to explain my attempt https://stackblitz.com/edit/angular-paezwe

i'm using angular 8 for information

Upvotes: 4

Views: 5006

Answers (1)

G. Tranter
G. Tranter

Reputation: 17908

MatListItems have display: block and width: 100% styling so they appear as rows in the list. You can override that to get them to display however you want. For example:

<mat-list-option *ngFor="let item of dataOption" 
    style="display:inline-block; width:50%; text-align:center;">
  {{item.label}}
</mat-list-option>

Upvotes: 9

Related Questions