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?

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

Solution 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

Solution 3

That's what workerd for me, no css simply adding thowe to mat-expansion-panel-header

<mat-expansion-panel-header [collapsedHeight]="'auto'" [expandedHeight]="'auto'">

Solution 4

Adding a general options/settings to set height for all panels across application:

MatExpansionPanelDefaultOptions

import { NgModule } from '@angular/core';
import { MAT_EXPANSION_PANEL_DEFAULT_OPTIONS } from '@angular/material';

@NgModule({
    providers: [
        {
            provide: MAT_EXPANSION_PANEL_DEFAULT_OPTIONS,
            useValue: {
                hideToggle: true,
                expandedHeight: '50px',
                collapsedHeight: '50px'
            }
        }
    ]
})
export class AppMaterialModule {}

View more solutions

Comments

[Alex Sim]

Hi! Thank you for the amazingly fast response! We just figured it out right as you posted your answer github.com/angular/material2/commit/… I referred to this, but I got confused on the .ts portion as I'm not familiar with it. However, we have hardcorded the height as per what you have shown!

[Faisal]

@AlexSim see the demo to get an idea how to bind it to a variable.

[Wenakari]

Thx ! Works perfectly !

[core114]

Thanks great solution

[John Mersal]

This should be the correct answer :) it gives flexibility for the lines to grow as much as needed.

[cs_pupil]

If your rows of text vary per header, you can pass in the empty string and it will automatically collapse to the height of your text. Example: [collapsedHeight]="''" [expandedHeight]="''". Then you can add padding to mat-expansion-panel-header as needed. This works for me in Material 5.2.4.

[BAM5]

Just to be nitpicky here, You don't actually have to surround these attributes with braces [] since you're not binding the property to a variable or expression. You could instead just do collapsedHeight="190px". Also, I like cs_pupil's solution as it offloads the height to the css (where it should be in my opinion) instead of the ts.

[harmonickey]

This is excellent! Just remember for those upgrading from 7.0.0 to 7.0.2 for this fix (or from any other version) make sure dependent libraries are updated as well. I had to update @angular/cdk to 7.0.2. Otherwise, I was getting various "function is not defined" errors.

[Thomas Weber]

This is the correct answer though one should add padding top/bottom of 12px via CSS to keep the padding of the header, which was previously achieved by the fixed height.

[Satria]

This is the most elegant way of creating a dynamic mat-expansion-panel-header, but from what I experienced, the collapsedHeight="*" expandedHeight="*" is not necessary.

[Alessandro Prete]

Absolutely the preferred way to solve the problem. Also I can confirm that as of now ( Angular 11.0.5 and Angular Material 11.0.3) collapsedHeight expandedHeight and the !important attribute are not necessary at all. So, at the end. a .mat-expansion-panel-header { height: auto;} is sufficient. I would also add some padding-bottom and padding-top to make it cleaner.