mat-expansion-panel-header expand/collapse animation jumps on non default header sizes

[efsinua]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Smooth animation transition of <mat-expansion-panel-header> on expand/collapse if header height is not default.

What is the current behavior?

When <mat-expansion-panel-header> height is changed with styling, animation jumps on expand/collapse to hard coded sizes at expansionHeight animation trigger to collapsedHeight: 48px or expandedHeight: 64px instead of smooth transition

What are the steps to reproduce?

http://plnkr.co/edit/zIEeYb?p=preview

What is the use-case or motivation for changing an existing behavior?

Possibility to override default <mat-expansion-panel-header> height

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

all including Angular Material 5.0.0-rc.1

Is there anything else we should know?

if replace values at expansion-panel-header.ts at animations trigger('expansionHeight',...)
collapsedHeight: '48px' to collapsedHeight: '*'
expandedHeight: '64px' to expandedHeight: '*'

expand/collapse animation will work smoothly

[amouly]

Verified, we have te same problem when changing the height of the header.

[atluriajith]

Any update on this? #5641 stating that to height and width as a attributes but can we handle this from CSS?.

[josephperrott]

This is actually working as expected.

If the collapsedHeight and expandedHeight are left to default, they will be 48px and 64px respectively. To define the height via css, you will need to set the parameters for the animation to * for both.

We can consider changing the way that height is defined for material defaults to allow for css stylings to apply as mentioned above, however we will need to ensure that this does not have unexpected impact before considering it as a viable option.

[atluriajith]

@josephperrott Thanks for the update 👍

[josephperrott]

Closed by #9313

[elrabelo]

@josephperrott I tried to do this, but it's not working yet. See this example: https://stackblitz.com/edit/angular-p6rpru. The animation occurs when the page loads.

[arjentuin]

line-height: 0;
Did the trick for me on class mat-expansion-indicator

[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.}