FAB Button over Tabbar

Hamidaraghi · January 16, 2019, 5:54pm

I have the same problem.
Any solution?

Vanessa-SC · May 16, 2021, 7:17pm

I couldn’t fix it, but I found an alternative by positioning the fab over the tab bar.

Add a custom class with sticky postion.

    <div class="fab-container">
      <ion-fab vertical="bottom" horizontal="end" slot="fixed">
        <ion-fab-button (click)="goToTop()" color="secondary">
          <ion-icon name="arrow-up"></ion-icon>
        </ion-fab-button>
      </ion-fab>
    </div>

.fab-container{
  top:80vh;
  position: sticky;
  z-index: 999999;
}

This is the result