Using boostrap grid with angular material mat-list

Question

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.

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

can you add your demo code in stackblitz, or any other platform? So that we can see what and where the issue is. — Shaik Subhan
– Shaik Subhan, Commented Jan 12, 2023 at 6:14

Mr. Stash · Accepted Answer · 2023-01-14 19:36:48Z

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>

Collectives™ on Stack Overflow

Using boostrap grid with angular material mat-list

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related