angularangular-cdkangular-cdk-virtual-scroll

Angular CDK Virtual Scroll - Items cut off at the bottom

When I scroll to the bottom of the scroll viewer, the last few items are cut off.

I'm using the experimental cdk and using autoSize.

<section id="main"
    class="section p-0">
    <div class="container">
        <ng-container *ngIf='allShows | async as data'>
            <cdk-virtual-scroll-viewport autosize
                [ngStyle]="{'height': 'calc(75vh)'}"
                class="scroll-viewport pb-2">
                <div *cdkVirtualFor='let row of data; let idx = index;  templateCacheSize:0'
                    class="columns is-multiline px-1">
                    <app-show-card class="column is-4"
                        *ngFor='let item of row'
                        [show]=item></app-show-card>
                </div>
            </cdk-virtual-scroll-viewport>
        </ng-container>
    </div>
</section>

The website is live here; https://lucid-thompson-158d2d.netlify.app/

The stackblitz; https://stackblitz.com/github/weirdyang/movie-therapy-angular (note it doesn't seem to work due to the scss imports);

A screenshot of the issue

What am I doing wrong?

Solution

  • Managed to solve this by chunking the array then either setting [itemSize] to the item row height or using the autosize attribute.