FAB Button over Tabbar

Ionic Framework ionic-v3
1

Hi there,

I’d like to have a FAB Button overlayed on a buttom tabbar, but can’t get it work. As you can see from the screenshot, it is cutted from the tabbar, changing z-index wont work either.

image
edgedfab.png414×736 17.6 KB

Furthermore, its no option to add the FAB Button to the tabbar template, it has to be within the view templates (not each of them)

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <h2>Welcome to Ionic!</h2>
  <p>
    This starter project comes with simple tabs-based layout for apps
    that are going to primarily use a Tabbed UI.
  </p>
  <p>
    Take a look at the <code>src/pages/</code> directory to add or change tabs,
    update any existing page or create new pages.
  </p>

  <ion-fab bottom right edge>
    <button ion-fab mini><ion-icon name="add"></ion-icon></button>
    <ion-fab-list>
      <button ion-fab><ion-icon name="logo-facebook"></ion-icon></button>
      <button ion-fab><ion-icon name="logo-twitter"></ion-icon></button>
      <button ion-fab><ion-icon name="logo-vimeo"></ion-icon></button>
      <button ion-fab><ion-icon name="logo-googleplus"></ion-icon></button>
    </ion-fab-list>
  </ion-fab>
</ion-content>

That’s the code from the home-view, everything else is just the starter project from ‘ionic start MyIonic2Project --v2’

Does anybody know how to solve the desired behaviour? Thanks in advance!

1 Like
2

Here I found a similar topic but the solution seems to be outdated:

3

Did you ever find a solution to this? My Fab button gets overlaid by the top title bar on iOS (Android works fine)

4

Nope, but in your case it should be solved by adding the “edge” attribute:

<ion-fab top right edge>
5

hi @mica

<ion-fab right bottom>
     <button ion-fab color="primary"><ion-icon name="md-share"></ion-icon></button>
     <ion-fab-list side="top">
       <button ion-fab color="primary"><ion-icon name="link"></ion-icon></button>
       <button ion-fab color="primary"><ion-icon name="logo-googleplus"></ion-icon></button>
       <button ion-fab color="primary"><ion-icon name="logo-facebook"></ion-icon></button>
       <button ion-fab color="primary"><ion-icon name="logo-twitter"></ion-icon></button>
       <button ion-fab color="primary"><ion-icon name="logo-linkedin"></ion-icon></button>
     </ion-fab-list>
</ion-fab>

Hope this will solve your issue.

Feel free to mark it as a solution and you can always like the answer by clicking heart icon.

1 Like
6

Hi, thanks for your answer, but I cant see why your solution should solve the entire issue? The FAB still stays layered under the tabbar if you flag it with the “edge” attribute (first screenshot). In my case it is required to positon it on top of the tabbar (eg. second screenshot). But this seems to be impossible atm.

7

You can use CSS! it’s simples!

1 Like
8

Really? give it a try…
position:absolute, z-index, etc none of them will work

9

position absolute; bottom: 100px; right 10px; try it

10

Danilo, please read my entire post, look at the second screenshot “Fixed Buttons” (see the red FAB-button). It is required to position the button ON TOP of the tabbar, not with any bottom distance.

11

Thanks - I already fixed it by moving it to the “bottom” of the Title bar (instead of the top of the content area.

12

I solved it by placing fab button in tab controller. :wink:

<ion-tabs>
        <ion-fab center bottom>
                <button ion-fab>Button</button>
            </ion-fab>
    <ion-tab [root]="tab1Root" tabTitle="home" tabIcon="home""></ion-tab>
    <ion-tab [root]="tab2Root" tabTitle="cards" tabIcon="card"></ion-tab>
</ion-tabs>
13

Hi @mica

I placed the fab inside a div:

      <div class="fab-container">
        <ion-fab bottom right edge>
          <button ion-fab mini color="light" (click)="goToEvent(card)">
            <ion-icon name="ios-open-outline"></ion-icon>
          </button>
        </ion-fab>
      </div>

The fab-container class:

.fab-container {
  position: relative;
}

For example:

events-page
events-page.jpg373×667 102 KB

or:

<ion-tabs [selectedIndex]="tabIndex" name="event">

  <ion-fab bottom right>
    <button ion-fab mini color="danger">
      <ion-icon name="add"></ion-icon>
    </button>
  </ion-fab>

  <ion-tab [root]="tab1Root" tabTitle="Discover" tabIcon="beer"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="Search" tabIcon="search"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="Me" tabIcon="person"></ion-tab>
  <ion-tab [root]="tab4Root" tabTitle="My Events" tabIcon="ribbon"></ion-tab>

</ion-tabs>

And:

14

My ‘ionic info’:

cli packages: (/usr/local/lib/node_modules)

    @ionic/cli-utils  : 1.18.0
    ionic (Ionic CLI) : 3.18.0

local packages:

    @ionic/app-scripts : 3.1.2
    Ionic Framework    : ionic-angular 3.9.2

System:

    Node : v8.9.1
    npm  : 5.5.1 
    OS   : macOS Sierra

Misc:

    backend : pro

See:

Cheers
Rob

2 Likes
14

Its not intened to have the fab on each page, only on a few of them.

15

Any solution on this? Thanks.

16

I have the same problem- is there anything I can do for it?

17 

<ng-container *ngIf="showFab">
  <ion-fab bottom right>
    <button ion-fab mini color="danger">
      <ion-icon name="add"></ion-icon>
    </button>
  </ion-fab>
</ng-container>
18

is this the solution? do you have any other solution?

19

Did anyone ever get this working?

The only solution that ever worked for me was putting the FAB inside the tab controller. But…this doesn’t work correctly on iPhone X.

20

Hi there,

Did you ever get a fix for this. My FABs worked fine till I upgraded ionic and now they appear under the toolbar. I have tried changing position, z-index …etx but nothing works, see image below:

image

I don’t know what ionic cli I was on either to roll back but would prefer to fix forward.

Thanks,
Noel