# Ion-fab button not fixing to bottom right

**URL:** <https://forum.ionicframework.com/t/ion-fab-button-not-fixing-to-bottom-right/221248>\
**Category:** Ionic Angular\
**Created:** [March 10, 2022, 2:58pm UTC](https://forum.ionicframework.com/t/ion-fab-button-not-fixing-to-bottom-right/221248 "2022-03-10T14:58:19Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![seanmcnary](https://avatars.discourse-cdn.com/v4/letter/s/5f8ce5/32.png) [@seanmcnary](https://forum.ionicframework.com/u/seanmcnary)\
**Post date:** [March 10, 2022, 2:58pm UTC](https://forum.ionicframework.com/t/ion-fab-button-not-fixing-to-bottom-right/221248/1 "2022-03-10T14:58:19Z")

</div>

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:

 ![image](https://global.discourse-cdn.com/ionicframework/original/3X/5/1/5164bbd08cbfcbfefa2f59f38299baa48885aeb7.png)

```auto
<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>

```

---

<div class="post-metadata">

**Author:** ![josemarsc-dev](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/josemarsc-dev/32/144398_2.png) [@josemarsc-dev](https://forum.ionicframework.com/u/josemarsc-dev)\
**Post date:** [March 11, 2022, 3:52pm UTC](https://forum.ionicframework.com/t/ion-fab-button-not-fixing-to-bottom-right/221248/2 "2022-03-11T15:52:30Z")

</div>

Have you tried placing the `ion-fab` as a direct child of `ion-content`?. Say, just before `</ion-content>`

---

<div class="post-metadata">

**Author:** ![seanmcnary](https://avatars.discourse-cdn.com/v4/letter/s/5f8ce5/32.png) [@seanmcnary](https://forum.ionicframework.com/u/seanmcnary)\
**Post date:** [March 11, 2022, 4:04pm UTC](https://forum.ionicframework.com/t/ion-fab-button-not-fixing-to-bottom-right/221248/3 "2022-03-11T16:04:19Z")

</div>

> [@seanmcnary](#):
>
> ```auto
> <ion-fab vertical="bottom" horizontal="end" slot="fixed">
> <ion-fab-button (click)="postExtraShift()">
> <ion-icon name="add"></ion-icon>
> </ion-fab-button>
> </ion-fab>
> 
> ```

Yes @josemarsc-dev, when I add it ion-fab right before ion-content, it just disappears.  
When I inspect, it shows it as below:

 ![image](https://global.discourse-cdn.com/ionicframework/original/3X/f/0/f06712e5eb451b93e4157368f0c2bc84b1b80a2b.png)

---

<div class="post-metadata">

**Author:** ![josemarsc-dev](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/josemarsc-dev/32/144398_2.png) [@josemarsc-dev](https://forum.ionicframework.com/u/josemarsc-dev)\
**Post date:** [March 11, 2022, 4:06pm UTC](https://forum.ionicframework.com/t/ion-fab-button-not-fixing-to-bottom-right/221248/4 "2022-03-11T16:06:30Z")

</div>

That’s weird. What version of ionic are you using? And can you show your CSS?