Enhancement, Fab Button should be given a higher Z Index

[amreladawy]

Short description of the problem:

The Fab button is meant to be on top of anything. But when there is an ion-card the button goes below it.

What behavior are you expecting?

The fab button should be on top of everything

Steps to reproduce:

1. create new empty project
2. add the following ion-content

Workaround Increase the button z-index with explicit style="z-index:1"

<ion-content>
  <button fab fab-right fab-top >
    <ion-icon name="log-out"></ion-icon>
  </button>
  <ion-card>

    <ion-item>
      <h1>Some User</h1>
      <p>His Email</p>
      <img src="http://placehold.it/200x200">
    </ion-item>

    <ion-item>
      <ion-icon name="football" item-left large></ion-icon>
      <h1>Museum of Football</h1>
      <p>11 N. Way St, Madison, WI 53703</p>
    </ion-item>

    <ion-item>
      <ion-icon name="wine" item-left large></ion-icon>
      <h1>Institute of Fine Cocktails</h1>
      <p>14 S. Hop Avenue, Madison, WI 53703</p>
    </ion-item>

    <ion-item>
      <span item-left>18 min</span>
      <span item-left>(2.6 mi)</span>
      <button primary clear item-right>
      <ion-icon name="navigate"></ion-icon>
      Start
    </button>
    </ion-item>
  </ion-card>
</ion-content>

Which Ionic Version? 2.x

Plunker that shows an example of your issue

For Ionic 2 issues -

http://plnkr.co/edit/7sjdD259lHD456ZKIsNV?p=preview

Run ionic info from terminal/cmd prompt: (paste output below)

Cordova CLI: 6.2.0 Gulp version: CLI version 1.2.1 Gulp local: Local version 3.9.1 Ionic Framework Version: 2.0.0-beta.10 Ionic CLI Version: 2.0.0-beta.32 Ionic App Lib Version: 2.0.0-beta.18 OS: Windows 7 SP1 Node Version: v4.4.7

[jgw96]

Hello, thanks for using Ionic! This has been fixed in the rc.0 release with the new ion-fab component described here in the docs.