Floating button at bottom right Ionic2

Question

I have the following layout

<!-- Page Content -->
<ion-content class="app-page card-list">
  <!--
  -->
  <ion-searchbar 
    [(ngModel)]="searchinput"
    (ionInput)="onInput(search)"
    placeholder="Search Contacts" light #search>
  </ion-searchbar>

  <!-- Refresher -->
  <ion-refresher (ionRefresh)="doRefresh($event)">
    <ion-refresher-content
      pullingIcon="arrow-dropdown"
      pullingText="Pull to refresh"
      refreshingSpinner="circles"
      refreshingText="Refreshing...">
    </ion-refresher-content>
  </ion-refresher>

  <!-- Contact List Start Here -->
  <ion-list>
    <!-- Foreach Contact in Contacts do -->
    <button ion-item  *ngFor="let contact of contacts" (click)="getContact(contact.id)" >
      <ion-avatar item-left>
         <img [src]="_DomSanitizationService.bypassSecurityTrustUrl('data:image/jpg;base64,' + contact.image_small)"    *ngIf="contact.image_small"/>
         <img src="img/nopic.png" text-center *ngIf="!contact.image_small"/>
      </ion-avatar>

      <h2>{{contact.name}}{{contact.parent_id? ", " + contact.parent_id[1] : ""}}</h2>
      <p><b>Mobile: </b>{{contact.mobile || "" }}&nbsp;<b>Phone: </b>{{contact.phone || "" }}&nbsp;<b>Email: </b>{{contact.email ||     ""}}&nbsp;</p>
    </button>
    <button (click)="newContact()" fab fab-bottom fab-right fab-fixed><ion-icon name="add"></ion-icon></button>
    <!-- Infinite Scroll -->
    <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
      <ion-infinite-scroll-content></ion-infinite-scroll-content>
    </ion-infinite-scroll>
  </ion-list> 
</ion-content>
<!-- Add new contact floating button -->

The problem that I face is that when I pull down the refresher, my bottom left floating button does not stay at the bottom.

I've even place the button out of ion-list, it does not help to keep the button at bottom.

Answer 1

You should use FAB outside the ion-content. The best way is create ion-footer and add FAB to it.

<ion-content>
  ...
</ion-content>
<ion-footer>
  <button (click)="newContact()" fab fab-bottom fab-right fab-fixed>
    <ion-icon name="add"></ion-icon>
  </button>
</ion-footer>