Material Angular Accordion header/title height

Question

So I've been trying to adopt Materials Accordion in my Web Application development.

However having some troubles getting the header to expand in size as the content grows.

My header is expected to have quite a few number of lines to give a summary and not just a 1 liner.

If I hard-code the material header height it causes the animation to go hay-wire.

Below is a sample code

<mat-accordion [displayMode]="displayMode" [multi]="multi" class="mat-expansion-demo-width">                 <mat-expansion-panel #panel1 [hideToggle]="hideToggle">                     <mat-expansion-panel-header>Section 1</mat-expansion-panel-header>                     <p>This is the content text that makes sense here.</p>                 </mat-expansion-panel>             </mat-accordion> 

::ng-deep .mat-expansion-panel-header {     height: 190px !important; } 

If I do the above the height gets set, but the animation for expand and collapse goes weird.

How should I go about this?

Answer 1

You dont have to use ::ng-deep. You can use [collapsedHeight] and [expandedHeight] on your mat-expansion-panel-header.

<mat-accordion [displayMode]="displayMode" [multi]="multi" class="mat-expansion-demo-width">     <mat-expansion-panel #panel1 [hideToggle]="hideToggle">         <mat-expansion-panel-header [collapsedHeight]="'190px'" [expandedHeight]="'190px'">             Section 1         </mat-expansion-panel-header>         <p>This is the content text that makes sense here.</p>     </mat-expansion-panel> </mat-accordion> 

Link to StackBlitz Demo.

Answer 2

As of today with Material 7.0.2, If you want to have the header follow some generic height:auto rule, this fix height might not be your solution. (for instance to follow the size of the text in the header in responsive situations)

in these situations, it's much better to have an auto height defined in css:

  mat-expansion-panel {     mat-expansion-panel-header {       height: auto!important;      }   } 

and define

  <mat-expansion-panel-header collapsedHeight="*" expandedHeight="*"> 

as explained in https://github.com/angular/material2/pull/9313