[beta 11] Fab button and header shadow


I’ve just updated to beta 11 and found that fab button seems to be between the header and header shadow:

To resolve the glitch a simply added, as a temporary workaround, a style like:

.button-fab {
  z-index: 1

Hope this could help someone.

Expect this, the update worked like a charm!
Wonderful job Ionic 2 team!!


We’re refactoring the FAB button for beta 12 to be a more complete component, so we’ll take this into consideration.

Please open an issue on github for this so we can address it.

Hi Mike,

Thanks for the quick response!

Just opened the issue:


I know that my question is not importante for your issue, but can you tell me what is the component in your application that own magic wand?

thank you.


I used the ionicons color-wand wrapped in the following code:

<ion-row center wrap class="tip grey">
      <ion-col wrap width-60><ion-row style="text-align: right;">Click the button to scan Barcode/QR-Code</ion-row></ion-col>
      <ion-col wrap width-10><ion-icon class="big" name="color-wand"></ion-icon></ion-col>
      <ion-col wrap width-20><img style="height:49px" src="assets/img/arrow.png"></ion-col>
      <ion-col wrap width-10></ion-col>


Thanks, but you know the name of that technique? I think is the “user introduction” or “user steps” but i haven’t found some example.


In this case I used just a static page, after the first scan I hide the element ion-row with class tip.

For your requirement (introduction guide / how to) I normally use a slide component wrapped in modal like the one shown by Josh in this post:


I hope it is the component you were looking for.