CSS is not working as expected with Angular Material

Question

I am using Angular Material mat-divider to create a table.

1.In my code where field name is Data Name some of the words disappear in the end.

2.Where field name is Data Gain the text is displayed outside of the boundary of the box.

How can I style/change CSS so that the issue can be resolved?

Here is the link to stackblitz - https://stackblitz.com/edit/angular-9-material-starter-haalp4?file=src%2Fapp%2Fapp.component.html

Here is html

<div>

  <ng-container>
    <mat-list class="boxed app-class">

      <mat-list-item class="bold" style='background-color: #c0c0c0;'>Data Name</mat-list-item>
      <mat-list-item class="textFields">One morning, when Gregor Samsa woke from troubled dreams, he found himself
        transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a
        little he could see his brown belly, slightly domed and divided by arches into stiff sections.
        -</mat-list-item>
      <mat-divider></mat-divider>
      <mat-list-item class="bold" style='background-color: #c0c0c0;'>Data Gain</mat-list-item>
      <mat-list-item class="textFields">
        <table>
          <tr>
            <td>
              One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a
              horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown
              belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it
              and seemed ready to slide off any moment. His many legs, pitifully thin compared with
            </td>
          </tr>
        </table>
      </mat-list-item>
    </mat-list>
    <section>

    </section>
  </ng-container>


</div>

ddmmcc ddmmcc · Accepted Answer · 2021-03-18T03:46:17

I think that there is a problem with <mat-list-item> tag. I changed it as <mat-list>. Then it works.

View -> https://stackblitz.com/edit/angular-9-material-starter-fbrr6z?file=src%2Fapp%2Fapp.component.html

<div>

  <ng-container>
    <mat-list class="boxed app-class">

      <mat-list-item class="bold" style='background-color: #c0c0c0;'>Data Name</mat-list-item>
      <mat-list class="textFields">One morning, when Gregor Samsa woke from troubled dreams, he found himself
        transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a
        little he could see his brown belly, slightly domed and divided by arches into stiff sections.
        -</mat-list>
      <mat-divider></mat-divider>
      <mat-list-item class="bold" style='background-color: #c0c0c0;'>Data Gain</mat-list-item>
      <mat-list class="textFields">
        <table>
          <tr>
            <td>
              One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a
              horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown
              belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it
              and seemed ready to slide off any moment. His many legs, pitifully thin compared with
            </td>
          </tr>
        </table>
      </mat-list>
    </mat-list>
    <section>

    </section>
  </ng-container>


</div>

CSS is not working as expected with Angular Material

1 Answers