How do I implement the 'add' FAB on the bottom right like I see in many Google web apps?

user_1404347 0
Viewed 15849

I'm am trying to implement a FAB on the bottom right corner of my web app. Is manual CSS the only way to do this? I do not see any documentation for this on https://material.angularjs.org.

This is an example of what I want to implement (the bottom right red button):

FAB add button on bottom right

material-design angular-material css html
3 Answers

The main CSS rule is "right"; in order to add to Luis's answer, add this rule to the CSS:

.md-fab-bottom-right{
    position: fixed !important;
    right: 15px; /* Add this and change value to set the margin you want */
}
user_74171450

To improve your question: if you have problems with the button's position add this to your css:

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

This way, the button will be fixed even if the user do scroll

user_50325500
Related