FAB only works if it is a direct child of ion-content

[Remco75]

Ionic version: (check one with "x")
[ ] 1.x (For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
[ ] 2.x
[x] 3.x

I'm submitting a ... (check one with "x")
[X ] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:
I have a component that will render (among others) a true FAB button. But being in component will always make it scroll with the content. I narrowed it down to the ion-fab element no being a direct child of ion-content.

Expected behavior:
I would like to use a fab button in any component and it still would be floating like it should. (at this point i am stuck putting the same logic in multiple places)

Steps to reproduce:
See the plucker for live demo
http://plnkr.co/edit/sxcYXhzE5wbxi8P6wSMN?p=preview

[jgw96]

Thanks for opening an issue with us, we will look into this.

[Manduro]

Duplicate of #8422, workaround here: #8422 (comment)

[Remco75]

@Manduro thnx, but the issue still stands, I want to wrap the fab in a component.(without writing custom styling) This should be pretty easy to fix. Instead of looking for the direct parent for ion-content, just look for the first ancestor.

[brandyscarney]

This is actually because of ng-content not being able to grab the ion-fab to place it in the fixed content div in the ion-content: https://github.com/ionic-team/ionic/blob/v3/src/components/content/content.ts#L163
Our recommended solution would be to add the ion-fixed attribute which tells it to place it in the fixed content:

<div ion-fixed style="top: 0; left: 0; right: 0; bottom: 0;">
  the fab-button at the bottom is in this nested div and is only visible after scroll
  <ion-fab bottom center><button ion-button>fails</button></ion-fab>
</div>

Note that I removed the edge attribute from your FAB because it adds negative margin and should really be used for placing a FAB over the edge of a toolbar.

Unfortunately, there is not an easy fix for this. We have long ran into issues with nested components, and that is why the best we can offer is using ngProjectAs or the attributes that we provide when an element is nested. There is an open issue for this on Angular's repo: angular/angular#6164. Here's another issue where it's discussed over custom components inside of an item: #9080

Fortunately, we have figured this out for the next major version, which we are hard at work on, and this will no longer be an issue. We mentioned what's to come in v4 in this blog: http://blog.ionic.io/announcing-ionic-3-5-3/

We'll be reaching out for testers soon, but so far we've seen it resolving some of these long-standing issues.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.