virtual scroll on Angular 7 is not visible - the height is zero by default

Question

Scenario:

• Tried a basic virtual scroll test reading this blog post
• the array had lots of items
• there was no error
• the list loaded in a virtual scroll but the height of it was 0 by default

quick fix was to

• set the height for cdk-virtual-scroll-viewport to 500px or set the height for class 'example-viewport' in app.component.css

Question: what is the proper way to overcome this zero height?

sample at https://stackblitz.com/edit/angular-efdcyc

Solution 1

This CSS works for me (no fixed height required):

<cdk-virtual-scroll-viewport class="viewport">  
   .......
</cdk-virtual-scroll-viewport>

.viewport { 
   display: contents;
}

Solution 2

• use min-height of 100% for the viewport and verify
• make sure, the height set on the viewport with 'itemSize' matches the height of the item in css

• if you are using an Observable, make sure to resolve it with *ngIf and the async pipe. Important: the html element is an ng-container, because it may not be rendered for the min-width to work!

    .list {
       min-height: 100%;
    }
  
    .item {
       height: 100px;
    }
  

When using an Observable as a source

<ng-container *ngIf="obs$ | async; let data">
  <cdk-virtual-scroll-viewport itemSize="100" class="list">

Solution 3

Add necessary CSS styles to provide the height of the element

.example-viewport {
  height: 200px;
  width: 200px;
  border: 1px solid black;
}

.example-item {
  height: 50px;
}

You can see the full content of the example you have mentioned here. https://material.angular.io/cdk/scrolling/overview

They also used custom CSS to style their elements.

Updated Slackblitz

Comments

[Akber Iqbal]

height of 50px or 500px is not exact... it should be tied to the itemSize which we define in <cdk-virtual-scroll-viewport>... but you're right that the example also gave a fixed number for the height !!

[Akber Iqbal]

Thanks for the reply, item height of 100px is arbitary... (2nd bullet) height of the item can change during responsiveness to screen size so we can't get the exact match;

[fcdt]

Welcome to Stack Overflow. Before you paste this in even more locations, please take the time to read Is it acceptable to add a duplicate answer to several questions?.