CODEWITHSUNDEEP
cssangularangular-material
Karthik Saxena
Karthik Saxena

Reputation: 888

How to align mat-list-item to horizontal without changing its base module css?

I have a mat-list in which I'm iterating my data and displaying my requirement is to align the list in horizontal fashion. This can be easily achieved by using simple <ul> but I'm using material and want to utilize the mat-list feature of it. Since material controls come with their on CSS and if we want to change the existing look n feel we need to change it in the base css file. I don't want to change the main mat-list-item css file since it is being many places in the project. I just want to align the mat-list-item horizontal.

<mat-list>
  <mat-list-item *ngFor="let privlege of userprivilege"> {{privlege}} </mat-list-item>
</mat-list>




 .mat-list-item {
 float: right;
 display: list-item;
 }

I'm new to angular material if anyone can suggest a good way to achieve it would be appreciative. I did not find the way to do it any where else.

Upvotes: 3

Views: 11380

Answers (2)

Awais
Awais

Reputation: 4902

Just add the class like inline-list to mat-list then change it to flex and use that class where ever you want inline list.

It wont effect other list

Example

<mat-list class="inline-list">
 <mat-list-item> Pepper </mat-list-item>
 <mat-list-item> Salt </mat-list-item>
 <mat-list-item> Paprika </mat-list-item>
</mat-list>


.mat-list-base.inline-list {
    display: flex;
}

Don't use float when you have flex

<div class="row">
     <div class="col-8">
          <div>
            <mat-card>
              <mat-card-header>
                 <mat-card-title>Role Privilege</mat-card-title>
              </mat-card-header>
              <mat-card-content>
                 <mat-list class="inline-list">
                    <mat-list-item *ngFor="let privlege of userprivilege"> {{privlege}} </mat-list-item>
                  </mat-list>
               </mat-card-content>
             </mat-card>
         </div>
     </div>
  </div>

enter image description here

Upvotes: 5

Syed
Syed

Reputation: 96

Well if you don't want edit the main CSS, which is never a good idea. You can write your own CSS class for this particular scenario. It will not effect the overall layout but only the list items where you are using it.

.horizontal-mat-list-item {
 float: right;
 display: list-item;
 }

Have a look at this stack blitz link.

https://stackblitz.com/edit/mat-list-horizontal

Upvotes: 2

Related Questions