CODEWITHSUNDEEP
angularmaterial-design
Joe Allen
Joe Allen

Reputation: 1317

How to move Mat expansion indication?

Is it possible to move the mat expansion indicator (Angular, Material Design) to set it before the title ?

No informations about that on material documentation https://material.angular.io/components/expansion/overview

enter image description here

Thank you :)

Upvotes: 5

Views: 8604

Answers (3)

David KELLER
David KELLER

Reputation: 656

with Angular 14, you can try this:

.mat-expansion-panel-header {
  flex-direction: row-reverse;
}

.mat-expansion-panel-header-title {
  padding-left: 12px;
}

Upvotes: 0

nipun-kavishka
nipun-kavishka

Reputation: 922

You can easily do this with the following code!

<mat-accordion>
        <mat-expansion-panel [togglePosition]="'before'">
          <mat-expansion-panel-header >
            <mat-panel-title>

            </mat-panel-title>

          </mat-expansion-panel-header>

        </mat-expansion-panel>
</mat-accordion>

Just add [togglePosition]=" 'before' "

Upvotes: 4

Mike Trinh
Mike Trinh

Reputation: 1303

you can always override default style. 

.mat-expansion-panel-header {
  flex-direction: row-reverse;

  .mat-content {
    padding-left: 12px;
  }
}

Upvotes: 11

Related Questions