angularangular-materialangular-cdkangular-cdk-virtual-scroll

CDK Virtual Scrolling Issue with maxBufferPx not displaying full list

I'm implementing CDK Virtual Scrolling for a large list, and while scrolling works smoothly with just minBufferPx, I'm having issues when adding maxBufferPx. Without it, I get this console error:

Error: CDK virtual scroll: maxBufferPx must be greater than or equal to minBufferPx

However, when I set minBufferPx to 500 and maxBufferPx to 1000, the list stops rendering all items and only a few are displayed. I feel like I'm missing something simple but can't quite figure it out.

Here’s a demo I've prepared that replicates my issue.

Any suggestions/thoughts?

Solution

  • You are passing a wrong value to the itemSize input. As per docs, the CDK expects the size of one list item in pixels. You are passing the number of items, which produces a wrong result. Once that mistake is fixed by passing 48 (which is the height of one collapsed expansion panel), the virtual scroll works fine with both minBufferPx and maxBufferPx set.

    <cdk-virtual-scroll-viewport
  class="viewport"
  minBufferPx="500"
  maxBufferPx="1000"
  itemSize="48"
>

    Also check the updated StackBlitz.