Search code examples
angularangular7virtualscroll

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

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

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

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

.viewport { 
   display: contents;
}