I'm having problems locating the FAB icon over the toolbar in angular material

0
votes

I'm having trouble positioning the angular material FAB button over the toolbar.

angular material FAB button positioning

Although my z-index in the FAB icon is greater than the one on the toolbar. Any thoughts?

HTML

<div ng-controller="AppCtrl" ng-cloak="" class="toolbardemoBasicUsage" ng-app="MyApp">
  <md-content>
    <md-toolbar class="md-tall md-accent">
      <h2 class="md-toolbar-tools">
        <span>Toolbar: tall (md-accent)</span>
      </h2>
    </md-toolbar>
    <md-content>
      <md-button class="md-fab my-fab-element" aria-label="Some content">
        +
    </md-button>
  </md-content>
</div>

CSS

.toolbardemoBasicUsage md-toolbar md-icon.md-default-theme {
  color: white;
}

md-content {
  position: relative;
}

.my-fab-element {
    right: 0;
    top: -35px;
    background: green !important;
}

DEMO

http://codepen.io/pennybirman/pen/NbjRNw

1
angular-material
Please, add some code to help us find the problem or even better, some demo (code snippet, codepen, jsfiddle, plunker) - Patryk Łucka
Here is a codepen. The FAB icon should be display over the toolbar. - PennyBirman
link - PennyBirman
ok, please check my answer below. Next time please remember to attach your code and demo in your question! - Patryk Łucka
@PennyBirman The linked demo appears to be different than the screenshot that you provided. - Karl Horky

1 Answers

0
votes

FAB goes beyond the md-content, and its overflow is set to auto, I think you should change it to overflow: visible

CSS:

md-content {
  position: relative;
  overflow: visible;
}