ion-fab in tab bar 'edge' position incorrect REDUX

Bug Report

This is a repost of https://github.com/ionic-team/ionic/issues/17130 as suggested by @brandyscarney It was closed as dupe of https://github.com/ionic-team/ionic/issues/16780 but is in fact not fixed.

Ionic version: [x] 4.0.2

Current behavior: The fab button sits between the footer and the bottom of the screen

Expected behavior: The fab button should sit between footer and content, like it used to. This used to work with beta13 and earlier.

Steps to reproduce: Create fresh ionic tabs project $ ionic start myApp tabs

Related code: Add FAB to tabs.page.html as illustrated in doc https://ionicframework.com/docs/api/fab/

<ion-fab vertical="bottom" horizontal="end" edge slot="fixed">
    <ion-fab-button>
      <ion-icon name="add">
      </ion-icon>
    </ion-fab-button>
  </ion-fab>

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.10.3 (/Users/run-e/.npm-global/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.0.2
   @angular-devkit/build-angular : 0.12.4
   @angular-devkit/schematics    : 7.2.4
   @angular/cli                  : 7.2.4
   @ionic/angular-toolkit        : 1.4.0

System:

   NodeJS : v8.11.2 (/usr/local/bin/node)
   npm    : 6.7.0
   OS     : macOS Mojave

[brandyscarney]

Ahh okay! So the problem with the code you provided is the fixed slot only exists on the ion-content element, see the source code here: https://github.com/ionic-team/ionic/blob/master/core/src/components/content/content.tsx#L324

Simplified version:

render() {
  return [
    <div class={{ 'inner-scroll': true }}>
      <slot></slot>
    </div>,
    <slot name="fixed"></slot>
  ];
}

Here is the documentation on the content slots: https://ionicframework.com/docs/api/content#slots

The slot="fixed" will have no effect inside of an ion-tabs because it doesn’t contain a slot named fixed. Instead, it will go in the default slot for the ion-tabs component, which is inside of the .tabs-inner div and does not overlay the tab-bar:

<slot name="top"></slot>,
<div class="tabs-inner">
  <slot></slot>
</div>,
<slot name="bottom"></slot>

Tab slots: https://ionicframework.com/docs/api/tabs#slots

You could place the ion-fab in the bottom slot to put it with the tab-bar, but the edge property won’t work because it pushes it further down (where it expects a footer to be) which is the opposite of what you want. However, this is something that could be accomplished with a bit of custom CSS:

<ion-tabs>
    <ion-fab slot="bottom" class="custom-fab">
      <ion-fab-button>Share</ion-fab-button>

      <ion-fab-list side="top">
        <ion-fab-button><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
        <ion-fab-button><ion-icon name="logo-twitter"></ion-icon></ion-fab-button>
        <ion-fab-button><ion-icon name="logo-youtube"></ion-icon></ion-fab-button>
      </ion-fab-list>
    </ion-fab>
    
    ...
</ion-tabs>

.custom-fab {
  bottom: 28px;
  right: 28px;
}

Here’s a Codepen example: https://codepen.io/brandyscarney/pen/qvmvNK?editors=1100

[pedroleao87]

I did like this…

I left an empty tab button to take up space and outside the <ion-tabs> tag inserted my action button.

Result: