Set minimum height for Angular Material Expansion Panel Content

Question

is there a way to set a minimum height on the angular material expansion panel content when its open? I've seen a number of examples for setting the expandedHeight and collapsedHeight for the header, but not for the content. There is a reference to MatExpansionPanelContent in the Angular Docs here: https://material.angular.io/components/expansion/api#MatExpansionPanelContent but I'm not seeing any properties that could be used to set a min height.

I've got a side nav coming out on top of a component with a mat accordion, and the side nav gets squished to the size of the expansion panel within the accordion. My html set up is below:

<div class="mtTool" fxLayout="row" fxLayout.sm="column">
<div fxFlex="65" >
    <mat-sidenav-container>
        <mat-sidenav #sidenav mode="over" closed>
            <app-mt-mark-form [mtp]="mtp" ></app-mt-mark-form>
        </mat-sidenav>
        <mat-sidenav-content>
            <app-mt-ticket-list></app-mt-ticket-list>/* this has the mat accordion
        </mat-sidenav-content>
    </mat-sidenav-container>
</div>
<div fxFlex="35">
    <app-mt-map></app-mt-map>
</div>

Thanks

Pete

pvitt pvitt · Accepted Answer · 2021-03-17T23:20:59

I wrapped a div around the content and set a min height in css. It seems to work fine

<mat-expansion-panel>
<mat-expansion-panel-header>
    <mat-panel-description>
       <h2>HEADER</h2> 
      </mat-panel-description>
</mat-expansion-panel-header>
<div class="ticketContent">
...content here
</div>

css

.markTicketContent{
min-height: 70vh;

}

Set minimum height for Angular Material Expansion Panel Content

1 Answers