Ion-fab button not fixing to bottom right

Unable to get the ion-fab/ion-fab-button to fix to the bottom right of the page.

When I scroll it doesn’t stay fixed to the bottom right slot.

Any help would be greatly appreciated:

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start"><ion-back-button defaultHref="home"></ion-back-button></ion-buttons>
    <ion-title>Extra Shift</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content class="extraShiftPage" >
    <ion-slides class="slideAsTab" pager="true" centeredSlides="true" *ngIf="extraShiftsByDay && extraShiftsByDay.length > 0">
        <ion-slide *ngFor="let extraShiftByDay of extraShiftsByDay">
          <ion-label class="slideHeader">{{extraShiftByDay.headerDate}}</ion-label>
          <div *ngIf="extraShiftByDay.extraShifts && extraShiftByDay.extraShifts.length > 0">
            <ion-card *ngFor="let extraShift of extraShiftByDay.extraShifts">
              <ion-card-content>
                <extra-shift-card [shift]="extraShift" (reload)="getExtraShifts()"></extra-shift-card>
              </ion-card-content>
            </ion-card>
          </div>
          <div *ngIf="extraShiftByDay && extraShiftByDay.extraShifts.length == 0">
            <label class="noShiftsFound">No Shifts Found</label>
          </div>
        </ion-slide>
    </ion-slides>
    <div>
        <ion-fab  vertical="bottom" horizontal="end" slot="fixed">
            <ion-fab-button (click)="postExtraShift()">
              <ion-icon name="add"></ion-icon>
            </ion-fab-button>
          </ion-fab>
    </div>
    <div *ngIf="extraShiftsByDay && extraShiftsByDay.length == 0">
      <label class="noShiftsFound">No Shifts Found</label>
    </div>
</ion-content>

1 post - 1 participant

Read full topic