1

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?

Lee
  • 703
  • 6
  • 20
  • Auto size, from what I remember is just a strategy for how to determine the total content height without rendering everything. So when you scroll to the end you should still see the entire content. I would use the element inspector to make sure som CSS style isn’t causing this. If you use a regular ngFor do you have this issue? – Ben L Jul 13 '21 at 01:30
  • No, no issue with the regular ngfor. – Lee Jul 13 '21 at 03:50

1 Answers1

0

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

Lee
  • 703
  • 6
  • 20