Problem over the position for ng-material-floating-button

I'm trying to implement a floating action button, I used angular material and this ng-material-floating-button. I managed to have the button, but it's in the halfway of the screen instead of bottom right position.

Screen Shot 2015-10-04 at 11.21.03 AM.png810x1406 44.8 KB

My code for this page:

<ion-view view-title="Dashboard">
<ion-content class="padding" has-heade="true" has-subheader="true">

<div class="list card">
  <div class="item item-divider">Recent Updates</div>
  <div class="item item-body">
    <div>
      There is a fire in <b>sector 3</b>
    </div>
  </div>
</div>
<div class="list">
  <div class="item item-divider">Today</div>
  <div class="item"> 
      <h2>
      shift
      </h2>
      <p>
        08:00 AM - 06:00 PM
      </p>
  </div>
  <div class="item">
    <h2 class=assertive>
    You have not checked in today
    </h2>
  </div>
</div>
<mfb-menu position="br" effect="zoomin" label="hover here"
 active-icon="ion-edit" resting-icon="ion-plus-round"
 toggling-method="click" main-action="fireMainAction()">
<button mfb-button icon="paper-airplane" label="menu item"></button>
</mfb-menu>
</ion-content>
</ion-view>