Ion-fab-list not working correctly!

Ionic Framework ionic-v3
1

I have added a fab button but it does not work correctly

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

   <ion-card *ngFor...........>
     <ion-card-header></ion-card-header>

    <ion-card-content>
      <ion-list>..........</ion-list>
    </ion-card-content>

    <ion-fab style="position: relative;">
      <button ion-fab mini><ion-icon name="md-share"></ion-icon></button>
        <ion-fab-list side="right">
           <button ion-fab><ion-icon name="logo-twitter"></ion-icon></button>
           <button ion-fab><ion-icon name="logo-linkedin"></ion-icon></button>
           <button ion-fab><ion-icon name="cloud-circle"></ion-icon></button>
        </ion-fab-list>
   </ion-fab>

  </ion-card>
 </ion-content>

I have added style="position: relative; because without it it does not stay inside the card… EACH card has to have the fab button.

however… the positioning of the fab is ok so far, but <ion-fab-list> appears off and outside the card when its active.

image

if I change position: relative;
image

this is the result:

image

THE PROBLEM is only in the list right and left if its top <ion-fab-list side="top"> then it works fine without any problems…if I remove position: relative; then it is all working fine however the positioning of the fab button is not inside the card.

image

2

ion-fab is not a FAB button by itself but a container that assist the fab button () allowing it to be placed in fixed position that does not scroll with the content. It is also used to implement “material design speed dial”, ie. a FAB buttons displays a small lists of related actions when clicked.

you are using the fab-cointer to positionate your fab-buttons → so this is not made to place it in a card. It is there two have something like the google material design action buttons. They are fixed and stay at the same position if you scroll the content.

744Ă—640 179 KB

3

According to the ionic 2 API docs and yeah maybe they meant button itself and not the container

  <!-- Button shaped as a circle that just like a normal button scrolls with the content -->
    <button ion-fab>Button</button>
    </ion-content>

and I have solved my issue by editing some CSS properties

   .fabButton {
     position: relative; 
    }
   .fabButton button {
     float: left;  
    }
   .fabButton ion-fab-list {
     position: relative; 
    }

 <ion-fab class="fabButton">
    <button ion-fab mini><ion-icon name="md-share"></ion-icon></button>
      <ion-fab-list side="right">
         <button ion-fab color="facebook"><ion-icon name="logo-facebook"></ion-icon></button>
         <button ion-fab color="twitter"><ion-icon name="logo-twitter"></ion-icon></button>
         <button ion-fab color="linkedin"><ion-icon name="logo-linkedin"></ion-icon></button>
         <button ion-fab color="light"><ion-icon name="logo-chrome"></ion-icon></button>
      </ion-fab-list>
    </ion-fab>

image

its on every card right now and working on web…but haven’t tested it on Real device yet

1 Like
4

Yeah it will work on device i think, but it is not a problem.

I just wanted to say --> ion-fab-list is working correctly ;).
But you are using it in a different way… so this is no problem with ionic at all.

in your case i would not use ionFab for this.

add a button to show and hide the list of buttons. And add simple rounded buttons. without the whole ion-fab stuff. It would be cleaner code and no css hacks needed

1 Like
5

thats a good advice… thanx man, I will try to do that… Do you have any example for it or a link on how to do that

6

no link, but it is really easy:

<button (click)="!showButtons">{{showButtons ? 'X' : '+'}}</button>

<button *ngIf="showButtons">Facebook</button>

ngIf removes the whole button from the dom and readds it, if the condition is truthy.

if you simply want to hide and show you can use this:

<button (click)="!showButtons">{{showButtons ? 'X' : '+'}}</button>

<button [hidden]="showButtons">Facebook</button>
1 Like
8

Bug: if you use ion-refresher and fab position fixed, on refersher the fab would not be fixed anymore.

1 Like