CODEWITHSUNDEEP
htmlcssmaterial-designangular-material
AskYous
AskYous

Reputation: 4730

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

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

Upvotes: 11

Views: 18126

Answers (3)

Gabriel Sánchez
Gabriel Sánchez

Reputation: 101

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 */
}

Upvotes: 10

Parzibyte
Parzibyte

Reputation: 1598

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

Upvotes: 2

AskYous
AskYous

Reputation: 4730

I just found out the answer:

<md-button class="md-fab md-fab-bottom-right" aria-label="Add a category">
  <md-icon>add</md-icon>
</md-button>

I had to add a classname of md-fab-bottom-right.

Upvotes: 14

Related Questions