CODEWITHSUNDEEP
angularangular-materialweb-frontend
Gashio Lee
Gashio Lee

Reputation: 129

Change Angular Material Expansion Panel Toggle Icon positioning

The angular expansion panel has a default toggle button to the right like so:

Angular expansion panel

I've tried looking into the documentation but couldn't find what I wanted. Is there a simple way of putting the toggle button to the left of the title(Personal Data) instead of having it all the way to the right?

There were some proprties to hide the toggle button but nothing relating to changing its position.

Upvotes: 0

Views: 1277

Answers (2)

Oscar Campos
Oscar Campos

Reputation: 11

If you wish only change the position left insted of right try this:

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

Upvotes: 1

woodykiddy
woodykiddy

Reputation: 6455

You can reposition the arrow button by overriding the default style rules. You are looking at mat-expansion-panel-header class in this case. 

.mat-expansion-panel-header {
  flex-direction: row-reverse;
}
.mat-content {
  padding-left: 10px;
}

Upvotes: 2

Related Questions