[beta 11] Fab button and header shadow

Ionic Framework ionic-v3
1

Hello,

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

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!!

Gianmaria

2

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.

3

Hi Mike,

Thanks for the quick response!

Just opened the issue:

4

Hi,

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.

5

Hi,

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>
</ion-row>
6

Hi

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.

7

Hi,

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:

quicklists-slideshow

I hope it is the component you were looking for.
KR