Ionic cdk-virtual-scroll-CodePudding

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

        <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  slot="start">
                <img src="assets/icons/group-icon.png">
              </ion-avatar>
              <ion-label color="tertiary">
                <ion-grid >
                  <ion-row >
                    <ion-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  slot="start">
                  <img [src]="contact.avatar || defaultAvatar">
                </ion-avatar>

                <ion-label>
                  <ion-grid >
                    <ion-row >
                      <ion-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.

CodePudding user response：

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.