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

Question

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?

With a `height: 100%;` it will get the parents height, you can handle the parents size as any other div in your page. — ibenjelloun, Oct 23 '18 at 09:42
@ibenjelloun, wouldn't work... you can try here https://angular-efdcyc.stackblitz.io/ ... but am i missing some dependency which should take care of it? — Akber Iqbal, Oct 23 '18 at 09:45
Imho the way to style the `cdk-virtual-scroll-viewport` element is totally arbitrary and a hit or miss. The `itemSize` property makes no sense at all, so you have to play with styles and the property until you get it about right. The documentation and the design of the component is a joke. — AsGoodAsItGets, May 17 '19 at 08:44

score 10 · Answer 1 · answered Dec 04 '18 at 12:36

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

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; — Akber Iqbal, Dec 06 '18 at 09:25

score 3 · Answer 2 · answered Oct 23 '18 at 10:16

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.

answered Oct 23 '18 at 10:16

Pandiyan Cool

height of 50px or 500px is not exact... it should be tied to the itemSize which we define in ... but you're right that the example also gave a fixed number for the height !! – Akber Iqbal Oct 23 '18 at 10:35

score 0 · Answer 3 · answered Sep 24 '20 at 20:16

0

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

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

.viewport { 
   display: contents;
}

answered Sep 24 '20 at 20:16

Rinkesh Patel

3

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?](https://meta.stackexchange.com/questions/104227/is-it-acceptable-to-add-a-duplicate-answer-to-several-questions). – fcdt Sep 24 '20 at 20:44

3 Answers3