Angular material expansion panel in virtual scroll

Question

I have a Virtual scroll feature on my website. Every item in virtual scroll is expansion panel with different count of lines within. When I implement <cdk-virtual-scroll-viewport> expansion panels are rendered fine, but when I click on current panel it not expand and only increase his height with maybe 5 px. I don't know how to do it, that expansion panel will expand properly.

I've tried to move expansion panel to <ng-container> but id didn't help.

<div class="container">
  <mat-card>
        <mat-card-title>
          <span class="panelItem">Id</span>
          <span class="secondPanelItem">Name</span>
          <span class="lastPanelItem">Version</span>
        </mat-card-title>
  </mat-card>
  <cdk-virtual-scroll-viewport itemSize="50" class="viewport">
    <mat-accordion>
      <ng-container *cdkVirtualFor="let description of allDescriptions">
        <mat-expansion-panel>
          <mat-expansion-panel-header>
            <mat-panel-title>
              <span class="panelItem">{{description.id}}</span>
              <span class="secondPanelItem">{{description.name}}</span>
              <span class="lastPanelItem">{{description.version}}</span>
            </mat-panel-title> 
          </mat-expansion-panel-header>
        </mat-expansion-panel>
      </ng-container>
    </mat-accordion>
  </cdk-virtual-scroll-viewport>
</div>

irudji · Accepted Answer · 2019-05-30 11:55:14Z

1

I finally found where was problem. I was setted in scss file height of expansion panel to 50 px so It can't expand more. When I removed this everything is OK.

answered May 30, 2019 at 11:55

irudji

2391 gold badge3 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular material expansion panel in virtual scroll

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related