Expansion panel indicator / chevron misalignment when panel is opened & closed

[mcenkar]

What is the expected behavior?

Chevron/Expansion trigger should be correctly vertically aligned with expansion panel title.

What is the current behavior?

https://angular-8f8etn.stackblitz.io/

Too low when closed

Too high when opened

What are the steps to reproduce?

https://angular-8f8etn.stackblitz.io/

Resize browser window

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

7

[crisbeto]

Should be sorted out by #10503.

[YoungCatChen]

Hi – may I know the status of this issue? It seems the chevron misalignment issue persists in the newest version and the fix #10503 wasn't merged.

[MikeJerred]

I am currently using this workaround in my styles.scss for all projects that use angular material:

.mat-expansion-indicator::after {
  transform: translateY(-3px) rotate(45deg);
}

Edit: just did the math and the translation should technically be by sqrt(2)^3 i.e. roughly 2.8284px

[crisbeto]

Closing since this was fixed in the M3 version of the expansion panel.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}