How to make PrimeNg VirtualScroller responsive height? - css

Question

I have a primeng VirtualScroller and it has a property scrollHeight that fixes some height. I've tried to set 100% at value but it doesn't accept. Also tried to add style or class to component to set height 100% but does not work aswell. How can I make the height have same height of the browser window?
<p-virtualScroller [value]="lazyCars" scrollHeight="40em" [itemSize]="150" [rows]="50" [cache]="false"
[lazy]="true" (onLazyLoad)="loadCarsLazy($event)" [totalRecords]="totalLazyCarsLength">
<ng-template let-car pTemplate="item" let-i="index">
<div class="ui-g car-item mt-1">
<div class="ui-g-12 ui-md-2">
<div class="ui-g-12 ui-md-12" style="font-size: 11px; text-align: center; padding-top: 18px">{{ generateDate() | date: 'dd/MM/yyyy' }}</div>
<div class="ui-g-12 ui-md-12" style="font-size: 24px; text-align: center; padding-top: 18px">{{ generateDate() | date: 'HH:mm:ss' }}</div>
</div>
<div class="ui-g-12 ui-md-2" style="display: flex">
<img class="rounded-image" src="../../assets/images/profileplaceholder.jpg" width="115" height="100" />
<!--<i style="font-size: 5rem; align-self: center;" class="pi pi-users mx-auto"></i>-->
</div>
<div class="arrow-left"></div>
<div class="ui-g-12 ui-md-5 chat-window">
<div class="ui-g">
<div class="ui-g-10 ui-sm-6">Autor: {{car?.autor}}</div>
<h2 class="ui-g-10 ui-sm-6 ml-2">Evento: {{car?.evento}}</h2>
</div>
</div>
</div>
</ng-template>
<ng-template let-car pTemplate="loadingItem">
<div class="ui-g car-item empty-car-item">
<div class="ui-g-12 ui-md-2">
<div class="empty-car-item-index"></div>
</div>
<div class="ui-g-12 ui-md-2">
<div class="empty-car-item-image"></div>
</div>
<div class="ui-g-12 ui-md-8">
<div class="ui-g">
<div class="ui-g-12"><div class="empty-car-item-text"></div></div>
<div class="ui-g-12"><div class="empty-car-item-text"></div></div>
<div class="ui-g-12"><div class="empty-car-item-text"></div></div>
<div class="ui-g-12"><div class="empty-car-item-text"></div></div>
</div>
</div>
</div>
</ng-template>
</p-virtualScroller>

Answer 1

This can be done using nested flexboxes. I've explained how those work with Angular in a different question. Applying that solution to this problem involves applying the equivalent of the flexbox-middle class to each element that composes the virtual scrolling area:
p-virtualScroller,
/deep/ .ui-virtualscroller,
/deep/ .ui-virtualscroller-content,
/deep/ .ui-virtualscroller-list,
/deep/ cdk-virtual-scroll-viewport {
display : flex;
flex : 1;
flex-direction : column;
}
With that styling, the scrollHeight attribute of the p-virtualScroller element should no longer be set as the component will flex to the height of the parent element:
<p-virtualScroller [itemSize]="50" [value]="items">
<ng-template pTemplate="item" let-obj>
{{ obj.name }}
</ng-template>
</p-virtualScroller>
The full code and a demo of the working result is available here.