How to make PrimeNg VirtualScroller responsive height?

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>

score 1 · Accepted Answer · answered Jul 22 '20 at 23:42

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.

Brandon Beiler · Answer 2 · 2023-05-31T13:24:28.137

As of primeNg version: 16.0.0-rc.1, there are a few changes to the accepted answer by sawprogramming. I've updated the accepted answer to utilize a new scss class.

component.scss

  .full-height-scroller{
    height: 100%;
    display: flex;
    flex-direction: column;

    .p-virtualscroller, .p-virtualscroller-content, p-scroller, .p-virtualscroller-list{
      height: 100%;
      display: flex;
      flex: 1;
      flex-direction: column;
    }
  }

component.html (ignoring virtualScroller configuration)

  <p-virtualScroller ... class="full-height-scroller">
  </p-virtualScroller>

component.ts (make sure to use ViewEncapsulation.None so your class can reach the nested scroller components)

@Component({
  selector: ...
  templateUrl: ...
  styleUrls: ...
  encapsulation: ViewEncapsulation.None
})
export class Component {
}

Keeping in mind

your parent container (holding the virtualScroller) needs to have the vertical space available.
If you don't want to use ViewEncapsulation, you have to convert the scss class to use ng-deep or an equivalent.

How to make PrimeNg VirtualScroller responsive height?

2 Answers2