Pin icon to bottom right corner using Materialize

Asked

Viewed 242 times

3

First time I’m using the materialize.

I would like to know how to fix an icon in the lower right corner.

<a class="btn-floating btn-large cyan pulse right"><i class="material-icons">edit</i></a>

Natively if there is.

html css html5 materialize

  • Which version of Materialize?

  • @hugocsl Is version 1.0

1 answer

2


I couldn’t find a native class to do this in the documentation, but you can make an adjustment using a top 100% less the height of the btn itself.

See how it looks in the example below:

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
.btn-bottom {
    top: calc(100% - 56px);
}
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" />
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>

<a class="btn-floating btn-large cyan pulse right btn-bottom"><i class="material-icons">edit</i></a>

Browser other questions tagged html css html5 materialize

You are not signed in. Login or sign up in order to post.