Fab buttons will be displayed under the ion-item-divider when not sticky

[alan-agius4]

Fab buttons will be displayed under the ion-item-divider when not sticky, As ion-item-divider has a z-index even when not sticky

Short description of the problem:

z-index is applied on ion-item-divider when might not be needed when it's not sticky

What behavior are you expecting?

No z-index applied and Fab button to be displayed on top of the ion-item-divider

Ionic 2.

[manucorporat]

@alan-agius4 what issue is causing to have z-index in non-sticky item dividers?

[alan-agius4]

Apologies, updated previous comment.

Actually, now that I am having a look at it again. I am not sure if the fab should show over the divider even when sticky

[manucorporat]

ok, looks like this is a real issue! the screenshot really made the difference, I understand perfectly what is going on.

Actually, now that I am having a look at it again. I am not sure if the fab should show over the divider even when sticky

yes, the fab should show over a sticky divider as well

[manucorporat]

can you share the markup?

[alan-agius4]

z-index of the fab is 100, while the one of the divider is 1000.

Markup to replicate below

<ion-content>
    <ion-fab>
        <button ion-fab>Button</button>
    </ion-fab>

    <ion-item-group>
        <ion-item-divider>Games</ion-item-divider>

        <ion-item>Pokémon Yellow</ion-item>
        <ion-item>Super Metroid</ion-item>
        <ion-item>Mega Man X</ion-item>
    </ion-item-group>
</ion-content>

[manucorporat]

<ion-item-group> should be inside <ion-list>. is that right @brandyscarney ?

[alan-agius4]

Not as per documention

"To divide groups of items, use <ion-item-group> instead of <ion-list>. Use <ion-item-divider> components to divide the group in to multiple sections:"
http://ionicframework.com/docs/v2/components/#list-dividers

[manucorporat]

@alan-agius4 so here's the thing. I understand the issue, but I can't reproduce it!! it works ok in my machine surprisingly.

[alan-agius4]

Thats odd, you are using RC 0? And same markup?

On Wednesday, 5 October 2016, Manu Mtz.-Almeida [email protected]
wrote:

@alan-agius4 https://github.com/alan-agius4 so here's the thing. I
understand the issue, but I can't reproduce it!! it works ok in my machine
surprisingly.

[image: screen shot 2016-10-05 at 18 20 49]
https://cloud.githubusercontent.com/assets/127379/19121901/7a82490a-8b28-11e6-85fe-e727b084d575.png

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#8489 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AQv-WmxR38qcEDh9LbGKPHgVK_JN7JHiks5qw86sgaJpZM4KOK_L
.

[manucorporat]

yes, RC0

<ion-header>
  <ion-toolbar>
    <ion-title>Floating Action Buttons</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
    <ion-fab>
        <button ion-fab>Button</button>
    </ion-fab>

    <ion-item-group>
        <ion-item-divider>Games</ion-item-divider>

        <ion-item>Pokémon Yellow</ion-item>
        <ion-item>Super Metroid</ion-item>
        <ion-item>Mega Man X</ion-item>
    </ion-item-group>
</ion-content>

[alan-agius4]

Seems like you managed to replicate it now :)

On Wednesday, 5 October 2016, Manu Mtz.-Almeida [email protected]
wrote:

Floating Action Buttons Button

<ion-item-group>
    <ion-item-divider sticky>Games</ion-item-divider>

    <ion-item>Pokémon Yellow</ion-item>
    <ion-item>Super Metroid</ion-item>
    <ion-item>Mega Man X</ion-item>
</ion-item-group>

[image: screen shot 2016-10-05 at 18 36 47]
https://cloud.githubusercontent.com/assets/127379/19122434/c63b4a5c-8b2a-11e6-8c15-0aaaa4cd9e25.png

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#8489 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AQv-WifbPd1qaO3nh4MF2vezNbCxwrhYks5qw9KDgaJpZM4KOK_L
.

[manucorporat]

@alan-agius4 I don't think so... the fab button is over the divider

[alan-agius4]

Right, well, i dont know :/ why i am having that issue than.

On Wednesday, 5 October 2016, Manu Mtz.-Almeida [email protected]
wrote:

@alan-agius4 https://github.com/alan-agius4 I don't think so... the fab
button is over the divider

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#8489 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AQv-WlBvYHJN2gUvY0KCyg5_NuavxJjdks5qw9PzgaJpZM4KOK_L
.

[manucorporat]

@alan-agius4 We are both missing something for sure haha!

• can you create a repo that reproduces the issue? or at least the whole markup?
• are you using tabs?
• is the fab ALWAYS under the divider?
• are there some kind of artifacts when clicking the fab, or when the page is transitioning?
• any custom css applied to fab/content/list/divider?

[alan-agius4]

Found the issue :), I have the ion-fab button inside a custom component.
For this case I wrapped it inside a "div" to mimic the issue.

Repo:
https://github.com/alan-agius4/ionic-playground

File:
https://github.com/alan-agius4/ionic-playground/blob/master/src/pages/hello-ionic/hello-ionic.html

Also, even something like the below will cause the issue

<template [ngIf]="1 === 1">
    <ion-fab>
      <button ion-fab>Button</button>
    </ion-fab>
  </template>

[manucorporat]

fixed! 14e668c

I didn't merge your PR since it didn't fix the root of the problem, but thank you anyway, your help resolving this issue has been amazing!

[alan-agius4]

cool :)