angularangular-materialangular-material2

Material Angular Accordion header/title height

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?

Solution

  • 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.