CODEWITHSUNDEEP
angularangular-materialangular-cdkangular-cdk-virtual-scroll
Aaron Nebbs
Aaron Nebbs

Reputation: 566

Angular cdk-virtual-scroll-viewport not taking max height until screen is resized

TLDR: have a list of items that need to be in a virtual scroll. It works fine, but only takes up ~30% of the space available until the screen size is changed. (make the dev tools larger).

On initial page load:

Initial page load

After resizing the page:

After resizing the page

Here is a stripped back version of the template:

    <cdk-virtual-scroll-viewport class="Viewport" itemSize="50">
      <div *cdkVirtualFor="let item of threadsDetails$ | async" class="Item">
        {{ item.thread.id }}
      </div>
    </cdk-virtual-scroll-viewport>

scss:

.Viewport {
  height: 100%;
}

.Item {
  border-bottom: solid 1px black;
  height: 50px;
}

After looking into the Angular chrome tools, it seems that the ngDoCheck is triggered on page resize.

Things i have tried to solve this:

Any ideas?

Upvotes: 3

Views: 3835

Answers (1)

Aaron Nebbs
Aaron Nebbs

Reputation: 566

Have fixed this. Needed to call checkViewportSize() on CdkVirtualScrollViewport.


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

this.threadDetailsSubscription = this.threadsDetails$
      .pipe(
        distinctUntilChanged(),
      )
      .subscribe(() =>
        this.cdkVirtualScrollViewport?.checkViewportSize(),
      );

Upvotes: 3

Related Questions