Cdk virtual scrolling issue

Question

Does any one met the issue of angular 7 cdk virtual scrolling working abnormally in mat-tab group.

https://github.com/angular/material2/issues/13981

My city component template looks like that

<cdk-virtual-scroll-viewport class="list-container" [itemSize]="50" minBufferPx="200" maxBufferPx="400" (scrolledIndexChange)="getNextBatch($event)">
  <div *cdkVirtualFor="let state of statesObservable | async; trackBy: trackByFn" class="list-group-item state-item">
    <div class="state">{{state.name}}</div>
    <div class="capital">{{state.capital}}</div>
  </div>
</cdk-virtual-scroll-viewport>

When put this city component to the mat-tab-group as the second tab

<mat-tab-group>
  <mat-tab label="Country">
    <app-country></app-country>
  </mat-tab>
  <mat-tab label="City">
    <app-city></app-city>
  </mat-tab>
</mat-tab-group>

The result looks like below:

The stackblitz code is here: https://stackblitz.com/edit/angular7-virtual-scroll-issue

Does anyone have some idea for this issue?

score 11 · Answer 1 · answered Jan 16 '19 at 14:59

11

You tell it to keep the Buffer size between 200px and 400px, yet your scroll window is much taller than that.

Change both the minimum and maximum to 1200px, this will keep the items cover your viewport, even when you scroll down for more items.

https://stackblitz.com/edit/angular7-virtual-scroll-issue-ftcnng

answered Jan 16 '19 at 14:59

Per Hornshøj-Schierbeck

15,097
21
80
101

Changing the minimum and maximum is the workaround solution. Because the attribute name is buffer, so it should be the amount additional to the viewport size. – rodent_la Mar 23 '19 at 10:42
5

This is **the right solution**, for everyone that comes here. Thank you! I owe you a coffee ;) – LppEdd Apr 11 '19 at 12:53
This is not the correct solution. It's a buffer that's additional to the viewport – itsundefined Jul 17 '19 at 00:25
perhaps @itsundefined, but that is not how it works/worked last time i checked – Per Hornshøj-Schierbeck Jul 18 '19 at 07:52

score 11 · Answer 2 · answered Mar 22 '19 at 09:50

11

You need to lazy load the tab content by declaring the body in a ng-template with the matTabContent attribute. This way, the viewport size is calculated only when the tab is shown.

  <mat-tab label="City">
    <ng-template matTabContent>
      <app-city></app-city>
    </ng-template>
  </mat-tab>

See: https://material.angular.io/components/tabs/overview#lazy-loading

answered Mar 22 '19 at 09:50

Liviu

111
1
2

3

This is the correct solution, all others are workarounds at best. Thanks! – Johannes Stadler Jul 21 '20 at 20:44
Worked very well, specially with `templateCacheSize: 0` on `*cdkVirtualFor`. Thanks! – Marco Nascimento May 23 '23 at 19:35

score 4 · Answer 3 · answered Nov 19 '19 at 10:41

4

The question has been asked some time ago, but there is a solution which is not a workaround.

First you need the Viewport Reference:

@ViewChild(CdkVirtualScrollViewport, {static: false}) cdkVirtualScrollViewport: CdkVirtualScrollViewport;

Then you can call the Method checkViewportSize() when the size of the Viewport has changed. Before you call this method you need to update the style height of the Viewport container.

this.heightChange$.subscribe(() => {
    this.cdkVirtualScrollViewport.checkViewportSize();
});

answered Nov 19 '19 at 10:41

Simon Steinbeisser

137
1
6

This is the correct answer. It will also update maxBufferPx & minBufferPx to work as described (*additional buffer off the screen*). I am using this fix on multiple projects. – Cooper Scott Dec 30 '21 at 19:38
This is what worked for me as well. I had a situation where the virtual scroll's viewport was in a flex-box, so it needed to respond to what the flex's layout would be. When it was initialized, it was less than what it needed to be. Calling this after the view was initilaized made it take up the entire space it could. – Julia Norman Apr 01 '22 at 17:42

score 1 · Answer 4 · answered Nov 26 '19 at 16:13

1

Works for me, thanks!

  @ViewChild(CdkVirtualScrollViewport) viewport: CdkVirtualScrollViewport;

  @HostListener('window:resize', ['$event'])
  onResize(event) {
    this.viewport.checkViewportSize();
  }

answered Nov 26 '19 at 16:13

Aleksandr Skobeltcyn

451
5
10

What to do after calling the ```checkViewportSize()``` mathod. – Abhishek Mani Feb 14 '20 at 14:20
1

Basically nothing, it's just fix the issue – Aleksandr Skobeltcyn Apr 28 '20 at 09:57

score -1 · Answer 5 · edited Dec 07 '20 at 16:30

-1

Use ItemSize only. Avoid Max and Min Buffer.

<cdk-virtual-scroll-viewport class="list-container" [itemSize]="50" >

It needs to be the exact pixel height of a single item.

edited Dec 07 '20 at 16:30

Mario Petrovic

7,500
14
42
62

answered Dec 07 '20 at 14:19

Fred

9
1

Cdk virtual scrolling issue

5 Answers5

Linked