I'm trying to use the FAB button from angular material, however, I have trouble properly positioning the button to float above the main content on my page, this is my code snippet:

<div layout="row" ng-cloak>
  <div layout="column">
    <div flex>
      <md-fab-speed-dial md-open="false" md-direction="down" ng-class="'md-scale'">
        <md-fab-trigger>
          <md-button aria-label="menu" class="md-fab md-warn">
            <md-icon class="material-icons">menu</md-icon>
          </md-button>
        </md-fab-trigger>
        <md-fab-actions>
          <md-button aria-label="Twitter" class="md-fab md-raised md-mini">
            <md-icon class="material-icons" aria-label="Twitter">format_list_bulleted</md-icon>
          </md-button>
          <md-button aria-label="Facebook" class="md-fab md-raised md-mini">
            <md-icon class="material-icons" aria-label="Facebook">insert_chart</md-icon>
          </md-button>
          <md-button aria-label="Google Hangout" class="md-fab md-raised md-mini">
            <md-icon class="material-icons" aria-label="Google Hangout">face</md-icon>
          </md-button>
        </md-fab-actions>
      </md-fab-speed-dial>
    </div>
  </div>
  <div layout="row" style="width: 100%">
    <div flex>
      <ui-view></ui-view>
    </div>
  </div>
</div>

The field <ui-view> pertains to my main view. This is how it looks on my browser:

I've read something about floating the FAB button in github but I can't find how to implement it nor does it say it was already implemented last update was 2015.

I'm trying to use the FAB button from angular material, however, I have trouble properly positioning the button to float above the main content on my page, this is my code snippet:

<div layout="row" ng-cloak>
  <div layout="column">
    <div flex>
      <md-fab-speed-dial md-open="false" md-direction="down" ng-class="'md-scale'">
        <md-fab-trigger>
          <md-button aria-label="menu" class="md-fab md-warn">
            <md-icon class="material-icons">menu</md-icon>
          </md-button>
        </md-fab-trigger>
        <md-fab-actions>
          <md-button aria-label="Twitter" class="md-fab md-raised md-mini">
            <md-icon class="material-icons" aria-label="Twitter">format_list_bulleted</md-icon>
          </md-button>
          <md-button aria-label="Facebook" class="md-fab md-raised md-mini">
            <md-icon class="material-icons" aria-label="Facebook">insert_chart</md-icon>
          </md-button>
          <md-button aria-label="Google Hangout" class="md-fab md-raised md-mini">
            <md-icon class="material-icons" aria-label="Google Hangout">face</md-icon>
          </md-button>
        </md-fab-actions>
      </md-fab-speed-dial>
    </div>
  </div>
  <div layout="row" style="width: 100%">
    <div flex>
      <ui-view></ui-view>
    </div>
  </div>
</div>

The field <ui-view> pertains to my main view. This is how it looks on my browser:

I've read something about floating the FAB button in github but I can't find how to implement it nor does it say it was already implemented last update was 2015.

• javascript
• html
• angularjs
• angularjs-material

2 Answers 2

Just got it, for anyone who wants to implement this kind of solution, please refer to the code snippet:

<div layout="row" ng-cloak>
  <div layout="row" style="width: 100%;">
    <div flex>
      <div style="float: <right or left>;">
        <THIS IS WHERE MY FAB BUTTON CODE GOES>
      </div>
      <ui-view></ui-view>
    </div>
  </div>
</div>

And the result is:

This is when FAB Button is floated to the right:

This is when FAB Button is floated to the left:

why don't you do like this:

CSS:

.fab-main {
    position: fixed;
    right: 1em;
    bottom: 1em;
}

and in the button:

<a mat-fab href="javascript:" class="fab-main">
    <mat-icon class="mat-18">add</mat-icon>
</a>

am I doing anything wrong? it worked for me