search

angular / components

Component infrastructure and Material Design components for Angular
https://material.angular.io
MIT License
24.35k stars 6.74k forks source link

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

Open mcenkar opened 5 years ago

mcenkar commented 5 years ago

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 image

Too high when opened image

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 commented 5 years ago

Should be sorted out by https://github.com/angular/material2/pull/10503.

YoungCatChen commented 4 years ago

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 commented 1 year ago

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