CODEWITHSUNDEEP
angularangular-materialmat-cardmat-expansion-panel
pfinferno
pfinferno

Reputation: 1945

Forcing mat-expansion-panel to overflow container element

I have a mat-expansion-panel inside of a mat-card. The expansion panel contains a mat-chip-list which contains anywhere between 50-60 mat-chip elements.

When I expand this panel, all of my mat-card objects are stretched downwards, and the chips show in a column one by one.

What I'm trying to do is have the expansion panel show overtop of its container so the user can see all the mat-chips at once instead of having to scroll down a bunch.

Here's what I'm seeing: enter image description here

Here's the code to replicate what I'm seeing: https://stackblitz.com/edit/angular-ivy-8lx7gr

I'm open to alternative ways of achieving this.

Upvotes: 2

Views: 12767

Answers (1)

ysf
ysf

Reputation: 4854

Here is my approach;

  1. in order to prevent mat-cards stretching downwards set fixed height on mat-card-content
<mat-card-content class="modified-mc-content">

in styles.css

.modified-mc-content {
  height: 48px
}

As a result mat-expansion-panel will overflow mat-card. But it will be behind Add to Pet! button. To solve this bring it to front with;

.modified-mc-content > mat-expansion-panel {
    z-index: 1;
}

Now mat-expansion-panel overflows properly but it causes a scroll on page which is not desirable. Instead I prefer to scroll inside mat-expansion-panel. So make mat-expansion-panel have a fixed height and scroll;

.modified-mc-content > mat-expansion-panel > .mat-expansion-panel-content {
    max-height: 50vh;
    overflow: auto;
}

By setting height and overflow on .mat-expansion-panel-content helps us in two ways; 1. Prevents mat-expansion-panel growing beyon page limits. 1. Makes mat-expansion-panel content scrollable while header stays put.

To make sure that chips display their content properly, without text overflowing out.

.modified-mc-content mat-chip {
  height: auto
}

Finally, make sure that cards properly overlay with each other when fxLayout.xs="column" is active.

<mat-card *ngFor="let food of foods;let i = index" [style.z-index]="foods.length - i">

Here is a working demo: https://stackblitz.com/edit/angular-ivy-6rsdzw

Hope it helps.

Upvotes: 3

Related Questions