Floating action button

Ionic Framework ionic-v3
1

Hi,

I wanted to try the floating action button <button fab fab-bottom> and don’t understand why during scrolling the button scroll also. I thought that if you ask to stay at the bottom, it will stay there. What am I missing?

I have something like:

<ion-content>
  <ion-card *ng-for...>
    <div ...>
      <ion-card-header>
        ...
      </ion-card-header>
      <ion-card-content>
        ...
      </ion-card-content>
    </div>
    <ion-item actions>
      ...
    </ion-item>
  </ion-card>

  <button fab fab-bottom fab-right>
    <icon add></icon>
  </button>
</ion-content>

Thanks!

2

You’ve put the button inside the ion-content – and ion-content is the scrolling part.

Maybe test placing the button outside of the ion-content. Adjust placement in scss as needed.

4 Likes
3

@mikkokam, you found the solution to my issue! Big thanks!

I was sure that everything needed to be within the ion-content. Really good to know.

1 Like
4

this didn’t work for me…gonna try the css way…

5

Do you have something like

<ion-navbar *navbar calm>
...
</ion-navbar>

<ion-content>
...
</ion-content>

<button fab fab-bottom fab-right (click)="add()" calm>
  <ion-icon name="add"></ion-icon>
</button>
6

Had it just like that the button just disappeared from the view. What I did in the css was put

Button{
Position:fixed
}

And it did what I wanted

2 Likes
7

same issue for me, i tried to set position: fixed, it’s better but now my button is behind my ion-content…

8

Try using z-index and setting it to something like 100 (or higher if needed) for the fixed element.

1 Like
9

Already try with z-index: 99, still doesn’t work

10 
.button-fab {
  z-index: 100;
}

did the trick for me.

1 Like
11

Still ko

this is my code

<ion-content padding> <ion-card> <ion-card-content> <ion-list> <ion-item ion-item *ngFor="#c of cards"> <ion-label id={{c.id}}>{{c.title}}</ion-label> <ion-icon darkgrey name="close" item-center></ion-icon> </ion-item> </ion-list> </ion-card-content> </ion-card> </ion-content> <button fab fab-bottom fab-center class="fixed" (click)="add()"> <ion-icon name="add"></ion-icon> </button>

And my scss

.fixed{ position: fixed; } .button-fab { z-index: 100; }
my fab-bottom button still behind my ion-content.

1 Like
12

styling inline with z-index works fine.

here is my code:

<ion-content>
    <ion-list>
        <ion-list-header>
        </ion-list-header>
      <ion-item-sliding *ngFor="#item of items">
      </ion-item-sliding>
    </ion-list>
</ion-content>

<button fab fab-right fab-bottom (click)="" style="z-index:100">
    <ion-icon name="add"></ion-icon>
</button>
3 Likes
13

Issue solved with this syntax ! Thanks

14

how to make it disappear when scrolls down like it does on a material design?

15

Btw guys only using the z-index under ion-content works for me. If you try to make a list with ion-sliders the buttons css will become all messed up.

16

I don’t understand why the position is set to absolute and not fixed.
It’s not logical that the fab scrolls with the screen.

Maybe can someone clarify this choice ?

Personally with the fab inside the ion-content, it scrolls (normal) and when put outside the ion-content, it doesn’t scroll anymore but is behind the content.
Thus in both cases, it needs CSS adjustments. I think a simple position: fixed would resolve this issue, no ?

1 Like
17

This works for me :smiley:

<ion-content> 
     <ion-fab right bottom>
         <button ion-fab color="danger"><ion-icon name="add"></ion-icon></button>   
     </ion-fab>
</ion-content>
4 Likes
18

thanks man it’s work for me.

19

As you wrote. It worked for me! Ionic 4
ion-fab horizontal=“end” vertical=“bottom” style=“position:fixed”

20

you’ve put the button wrong place .

Try to test placing the button outside of the ion-content.