Alignment Problem with Angular Material Expansion Panel Header

Question

I am using Angular 14 Material Expansion Panel as below...

<mat-nav-list>
  <a mat-list-item role="listitem" class="list-item-setting" id="emailTemplatesId" matTooltipPosition="right"
    routerLinkActive="active">
    <mat-icon class="list-item-setting">email</mat-icon>
    <span class="nowrap">User 1</span>
  </a>
  <a>
    <mat-accordion>
      <mat-expansion-panel hideToggle [(expanded)]="panelOpenState">
        <mat-expansion-panel-header>
          <mat-panel-title style="text-align: left">
            <mat-icon class="list-item-setting">email</mat-icon>
            <span class="list-item-setting">&nbsp;&nbsp;&nbsp;&nbsp;User 2</span>
          </mat-panel-title>
        </mat-expansion-panel-header>
        <div>
          <mat-panel-description class="mat-panel-description-setting"><a class="list-item-setting"
              routerLinkActive="active">Submenu 1</a></mat-panel-description>
          <mat-panel-description class="mat-panel-description-setting"><a class="list-item-setting"
              routerLinkActive="active">Submenu 2</a></mat-panel-description>
          <mat-panel-description class="mat-panel-description-setting"><a class="list-item-setting"
              routerLinkActive="active">Submenu 3</a></mat-panel-description>
        </div>
      </mat-expansion-panel>
    </mat-accordion>
  </a>
</mat-nav-list>

The css code is below...

.list-item-setting {
    padding: 0!important;
    padding-left: 16px;
    color: $white;
}

The current output is as given below...

The current output seems to be good. If you notice the angular html code above, I have used   4 times to achieve this.

Is it possible to achieve the same output with padding for User 2 in css to achieve the same result? I have used the same list-item-setting but could not succeed. This problem occurs when I use mat-accordion.

Answer 1

The padding-left didn't work because you didn't add !important.

If you change this...

.list-item-setting {
  padding: 0 !important;
  padding-left: 16px;
}

...to this...

.list-item-setting {
  padding: 0 !important;
  padding-left: 16px !important;
}

...you get this output.

But this is not what you want, I guess. As you can see, there's padding-left where it shouldn't be, and there's no padding-left where it should be. Why? You added the class list-item-setting to multiple elements. I suggest you add a specific class (e.g, add-padding) that will only add padding-left. Add this class to all elements you want to have the padding-left.

I guess you want to have padding-left on User 1, User 2, Submenu 1, Submenu 2, and Submenu 3. If you don't want to have it on any of these elements, just remove the class add-padding on that element.

list-overview-example.ts

import { Component } from '@angular/core';

/**
 * @title Basic list
 */
@Component({
  selector: 'list-overview-example',
  templateUrl: 'list-overview-example.html',
})
export class ListOverviewExample {}

list-overview-example.html

<mat-nav-list>
  <a
    mat-list-item
    role="listitem"
    class="list-item-setting"
    id="emailTemplatesId"
    matTooltipPosition="right"
    routerLinkActive="active"
  >
    <mat-icon class="list-item-setting">email</mat-icon>
    <span class="nowrap add-padding">User 1</span>
  </a>
  <a>
    <mat-accordion>
      <mat-expansion-panel hideToggle>
        <mat-expansion-panel-header>
          <mat-panel-title style="text-align: left">
            <mat-icon class="list-item-setting">email</mat-icon>
            <span class="list-item-setting add-padding">User 2</span>
          </mat-panel-title>
        </mat-expansion-panel-header>
        <div>
          <mat-panel-description class="mat-panel-description-setting"
            ><a class="list-item-setting add-padding" routerLinkActive="active"
              >Submenu 1</a
            ></mat-panel-description
          >
          <mat-panel-description class="mat-panel-description-setting"
            ><a class="list-item-setting add-padding" routerLinkActive="active"
              >Submenu 2</a
            ></mat-panel-description
          >
          <mat-panel-description class="mat-panel-description-setting"
            ><a class="list-item-setting add-padding" routerLinkActive="active"
              >Submenu 3</a
            ></mat-panel-description
          >
        </div>
      </mat-expansion-panel>
    </mat-accordion>
  </a>
</mat-nav-list>

styles.scss

.mat-expansion-panel-header {
  padding: 0 16px !important;
}

table {
  border-collapse: collapse;
}

.add-padding {
  padding-left: 16px;
}

Output:

See the live demo.