CODEWITHSUNDEEP
angular-materialresponsivebootstrap-5
jboo
jboo

Reputation: 374

Using boostrap grid with angular material mat-list

I'm trying to use bootstrap 5 grid with angular material component mat-list but it's not working.

I want the text of the 2 field to use 12 columns on small device.

I have made a test using div and I get the right result but when I try to use boostrap container/row and col-X class with the mat-list it's not working.

enter image description here

Using div

<div *ngIf="dto">
  <div class="container" >
  <div class="row pb-2" >
    <span class="champ col-12 col-md-6">NOM D'USAGER</span>
    <span class="donnee col-12 col-md-6">example 1</span>
  </div>
  <mat-divider></mat-divider>
  <div class="row pb-2" >
    <span class="champ col-12 col-md-6">COURRIEL</span>
    <span class="donnee col-12 col-md-6">example 2</span>
  </div>
  <mat-divider></mat-divider>
  </div>
</div>

With angular material mat-list

<mat-list role="list" class="container" *ngIf="dto">
  <mat-list-item role="listitem" class="row pb-2">
    <span class="champ col-12 col-md-6">NOM D'USAGER</span>
    <span class="donnee col-12 col-md-6">example 1</span>
  </mat-list-item>
  <mat-divider></mat-divider>
  <mat-list-item role="listitem" class="row pb-2" >
    <span class="champ col-12 col-md-6">COURRIEL</span>
    <span class="donnee col-12 col-md-6">example 2</span>
  </mat-list-item>
  <mat-divider></mat-divider>
</mat-list>

Edit: I added a demo code in stackblitz stackblitz

Upvotes: 0

Views: 192

Answers (1)

Mr. Stash
Mr. Stash

Reputation: 3160

When material renders the elements for mat list, an additional div element gets added between mat-list-item and the content, the rendered structure looks like this

<mat-list-item class="mat-list-item" role="listitem" class="row pb-2 w-100">
  <div class="mat-list-item-content">
    <span class="champ col-12 col-md-6">NOM D'USAGER</span>
    <span class="donnee col-12 col-md-6">example 1</span>
  </div>
</mat-list-item>

The col elements are not the direct child of the row element, which is why the flex properties do not work

To fix this wrap the spans with a div with a class row

<mat-list role="list" class="container-fluid">
  <mat-list-item role="listitem">
    <div class="row pb-2 w-100">
      <span class="champ col-12 col-md-6">NOM D'USAGER</span>
      <span class="donnee col-12 col-md-6">example 1</span>
    </div>
  </mat-list-item>
  <mat-divider></mat-divider>
  <mat-list-item role="listitem">
    <div class="row pb-2 w-100">
      <span class="champ col-12 col-md-6">COURRIEL</span>
      <span class="donnee col-12 col-md-6">example 2</span>
    </div>
  </mat-list-item>
  <mat-divider></mat-divider>
</mat-list>

Upvotes: 0

Related Questions