0

I wanted to set the height[say 32px] of mat-expansion-panel-header which I was able to. However, while expanding the panel, the height goes to material's default height [I guess 64px] and then sets it to my custom height[32px]. This resulted in a flickering-effect. You may check the behavior at https://angular-v138d6.stackblitz.io

Pl advise if there is a way to override the mat-expansion-panel-header height while the panel is 'being expanded'

nsk
  • 1,413
  • 5
  • 24
  • 34
  • 1
    please refer below question https://stackoverflow.com/questions/49747188/material-angular-accordion-header-title-height – mvshibu Apr 27 '19 at 06:48

2 Answers2

3

If you read the documentation of Angular Expansion Panel Header there are two properties collapsedHeight & expandedHeight. You can use these to set the height.

<mat-expansion-panel-header collapsedHeight="56px" expandedHeight="56px">
  <mat-panel-title>Personal data</mat-panel-title>
</mat-expansion-panel-header>
Aamer Shahzad
  • 2,617
  • 1
  • 27
  • 25
-1

use 

.mat-expansion-panel-header.mat-expanded {
height: 4rem
}

If required you can also use 

/ngdeep/.mat-expansion-panel-header.mat-expanded {
height: 4rem
}
Chandra Sagar
  • 81
  • 4