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
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;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.