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

Reputation: 15041

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

Scenario:

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?

Upvotes: 9

Reputation: 980

From these answers, I like the one with display: contents; most because it has no % or px.

This also worked for me:

cdk-virtual-scroll-viewport { 
    contain: none;
}

Upvotes: 0

Reputation: 72

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

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

.viewport { 
   display: contents;
}

Upvotes: 5

Reputation: 231

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">

Upvotes: 12

Reputation: 6585

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.

Upvotes: 6