Cdk-virtual-scroll-viewport not showing when nested in elements other than ion-content

Ionic Framework Ionic Angular
1

I’m getting up to speed with ionic/angular for a project and after noting the ion-virtual-scroll is deprecated, I’m attempting to reproduce my very small feature using cdk-virtual-scroll-viewport. The issue I’m having is the cdk-virtual-scroll-viewport cannot be nested in any element except for the ion-content element. My scrollable feature is here:

  <cdk-virtual-scroll-viewport
    class="ion-content-scroll-host"
    itemSize="56">
    <ion-list>
      <ion-item class="ion-text-center"
        *cdkVirtualFor="let place of scrollablePlaces"
        [routerLink]="['/', 'places', 'tabs', 'discover', place.id]"
        detail
      >
        <ion-thumbnail slot="start">
          <ion-img [src]="place.imageUrl"></ion-img>
        </ion-thumbnail>
        <ion-label>
          <h2>{{ place.title }}</h2>
          <p>{{ place.description }}</p>
        </ion-label>
      </ion-item>
    </ion-list>
  </cdk-virtual-scroll-viewport>

The entire feature for context:

<ion-content class="ion-padding-top ion-padding-end ion-text-center">
  <ion-grid>
    <ion-row>
      <ion-col class="ion-text-center" size="12" size-sm="8" offset-sm="2">
        <ion-card>
          <ion-card-header>
            <ion-card-title>{{ featuredPlace.title }}</ion-card-title>
            <ion-card-subtitle>{{ featuredPlace.price | currency}}/night</ion-card-subtitle>
          </ion-card-header>
          <ion-img [src]="featuredPlace.imageUrl"></ion-img>
          <ion-card-content>
            <p>{{ featuredPlace.description }}</p>
          </ion-card-content>
          <div>
            <ion-button
              fill="clear"
              color="primary"
              routerDirection="forward"
              [routerLink]="['/', 'places', 'tabs', 'discover', featuredPlace.id]"
            >More</ion-button>
          </div>
        </ion-card>
      </ion-col>
    </ion-row>
  </ion-grid>

  <cdk-virtual-scroll-viewport
    class="ion-content-scroll-host"
    itemSize="56">
    <ion-list>
      <ion-item class="ion-text-center"
        *cdkVirtualFor="let place of scrollablePlaces"
        [routerLink]="['/', 'places', 'tabs', 'discover', place.id]"
        detail
      >
        <ion-thumbnail slot="start">
          <ion-img [src]="place.imageUrl"></ion-img>
        </ion-thumbnail>
        <ion-label>
          <h2>{{ place.title }}</h2>
          <p>{{ place.description }}</p>
        </ion-label>
      </ion-item>
    </ion-list>
  </cdk-virtual-scroll-viewport>
</ion-content>

If I were to wrap the cdk-virtual-scroll-viewport in a div, or create a new ion-row/ion-col and place it inside, it would not render my ion-items on the dom. When removed and placed as a direct child of ion-content, it works. Otherwise when nested any further, it does not render. It should be noted that I can find them in the element inspector, but no amount of attribute manipulation that I’ve done will make them appear.

This is a bit of a headache because I can’t seem to use the ionic responsive attributes/classes for different devices, much less just center the thing.

3 Likes