CODEWITHSUNDEEP
material-designangular-material-6
nsk
nsk

Reputation: 1463

How to set the height of Angular material's mat-expansion-panel-header while being expanded?

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'

Upvotes: 0

Views: 7050

Answers (2)

Aamer Shahzad
Aamer Shahzad

Reputation: 2947

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>

Upvotes: 3

Chandra Sagar
Chandra Sagar

Reputation: 111

use 

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

If required you can also use 

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

Upvotes: -1

Related Questions