Ionic cdk-virtual-scroll

Question

Recently I replaced all the ion-virtual-scroll components in my ionic project to cdk-virtual-scroll from and Angular cdk because ion-virtual-scroll is gonna be deprecated in ionic7. After this change I got an issue that when I'm using the cdk scroller, the last items are overlapping with the soft buttons on android and you can't see the last item. This is a problem I didn't have with ion-virtual-scroll. I haven't found anything about this online and I was wondering if anyone had this issue and if somebody has a solution for this. I tried using the cdk-virtual-scroll directly under the ion-content component (with width 100% and height 100%) and also using flex and flex-grow 1. this is an example code snippet where it is happening:

<ion-content>
  <cdk-virtual-scroll-viewport itemSize="48" minBufferPx="900" maxBufferPx="1350" style="width: 100%; height: 100%;">
    <ng-container *ngIf="contacts$ | async as filteredContacts">
      <ion-list *ngIf="filteredContacts" id="contacts" class="contacts-list">

        <ion-item *ngIf="filteredContacts?.length === 0 else contactsPicker" translate>
          CONTACTS.EMPTY_MESSAGE
        </ion-item>

        <ng-template #contactsPicker>

          <ion-item-group>
            <ion-item lines="none" [disabled]="(groupManagement$ | async) === false" (click)="createGroup($event)"
              *ngIf="filteredContacts?.length">
              <ion-avatar class="chat-avatar" slot="start">
                <img src="assets/icons/group-icon.png">
              </ion-avatar>
              <ion-label color="tertiary">
                <ion-grid class="contact-grid">
                  <ion-row class="contact-row">
                    <ion-col class="contact-col" size="10">
                      <h2 translate>CONTACTS.NEW_GROUP</h2>
                    </ion-col>
                  </ion-row>
                </ion-grid>
              </ion-label>
            </ion-item>
          </ion-item-group>

          <ion-item-group>
            <ion-item-divider>
              <ion-label translate>CONTACTS.CONTACTS</ion-label>
            </ion-item-divider>


            <ion-list>
              <ion-item *cdkVirtualFor="let contact of filteredContacts"
                (click)="!contact.blocked && pickContact(contact)" id="{{contact.name}}"
                data-cy="contactPickerListItem">

                <ion-avatar class="chat-avatar" slot="start">
                  <img [src]="contact.avatar || defaultAvatar">
                </ion-avatar>

                <ion-label>
                  <ion-grid class="contact-grid">
                    <ion-row class="contact-row">
                      <ion-col class="contact-col" size="10">
                        <ion-text [color]="contact.blocked ? 'medium' : undefined">
                          <h2>{{ contact.name + (contact.blocked ? '
                            (Blocked)' : '')}}</h2>
                        </ion-text>
                      </ion-col>
                    </ion-row>
                  </ion-grid>
                </ion-label>

              </ion-item>
            </ion-list>
          </ion-item-group>
        </ng-template>


      </ion-list>
    </ng-container>
  </cdk-virtual-scroll-viewport>
</ion-content>

If anybody got a solution to share it will help a lot.

Answer 1

I recently found a solution and the issue was that my cdk-virtual-scroll-viewport was inside an ion-list component. If you happen to have this issue check if your scroll component is inside an ion-list .

Answer 2

I am facing this problem too in my ionic project. But it did not happen to my angular project. Even though both of them used the same module. Try to do it on angular + angular material only.