md-fab isn't fixed when scrolling

[jgoux]

Hello,
shouldn't a md-button with "md-fab md-fab-bottom-right" be fixed at its position
even when the parent container is scrollable ?
I'm on the master branch, and at the moment the button doesn't stay at its position when I scroll :

For the markup, it's just a md-button inside a md-content :

<md-content>
    <!-- other divs -->
    <md-button class="md-fab md-fab-bottom-right">
        <md-icon md-font-icon="mdi mdi-check"></md-icon>
    </md-button>
</md-content>

[gustavohenke]

I think you shouldn't place the FAB inside md-content in order for this to work.

[ThomasBurleson]

Please post this in the Angular Material Forum

[jgoux]

I still think that md-fab should be fixed and not positioned using "absolute". 😄
Here is an example I made : http://codepen.io/jgx/full/jPqyYX/
You can resize to see how the md-fab is moving (bottom right on mobile)
Maybe you could provide template example like the one I made to show how we can use the md-fab positions (or more generally starter templates) ?
I do agree that with the fixed position, it's hard to make a solution for everyone, it really depends on the global layout.

[VesperDev]

.md-button.md-fab.md-fab-bottom-right {
top: auto;
right: 20px;
bottom: 20px;
left: auto;
position: fixed;
}

I put the fixed attribute and functioning properly in any resolution

[androidovshchik]

thank you, @VesperDev

[abinthomasonline]

md-fab-speed-dial.md-fab-bottom-right {
position: fixed !important;
}

this works....

[gbergamo]

To not change all md-fab-bottom-right, or add "style" tag in all pages, my suggestion is:
<md-button class="md-fab md-primary md-fab-bottom-right" aria-label="New" ng-click="insert()" style="position:fixed !important;"> <md-tooltip md-direction="top">New</md-tooltip> <ng-md-icon icon="add"></ng-md-icon> </md-button>

[chey]

+1

[majew7]

Position Fixed Not Enough

For me position: fixed helped. But it wasn't the full solution for Safari on iOS. The position: fixed was causing interesting issues on iPhone iOS 9.3.

My unfortunate workaround was to move the FAB button to a much higher place within the HTML hierarchy.