Search code examples
androidhtmlcssmaterialize

How to align / display on the left of the screen a materializecss floating button?


I am using materializecss. I have a floating button, and it is working fine, it displays on the bottom right hand side, code below:

<div class="fixed-action-btn click-to-toggle">
<a class="btn-floating btn-large yellow accent-3"><i class="material-icons">menu</i></a>
<ul>
    <li><a class="btn-floating red" href="#disclaimer"><i class="material-icons">announcement</i></a></li>
    <li><a class="dropdown-button btn-floating blue" href="#state_selection"><i class="material-icons">language</i></a></li>
    <li><a class="btn-floating red" href="#"><i class="material-icons">email</i></a></li>
  </ul>
</div>

I would like to have the button aligned on the left. On the same height from the bottom, but instead of on the right, on the left hand side of the screen. I already tried changing:

<div class="fixed-action-btn click-to-toggle">

to:

<div class="fixed-action-btn click-to-toggle left-align">

and also to:

<div class="fixed-action-btn click-to-toggle left">

and none of those works. The button continues on the right hand side.

How can I align the button to the left?


Solution

  • you can try to add another class and do anithing like this:

          .left-button{
           left: 23px;
           right: auto;
          }
    

    then the html

          <div class="fixed-action-btn click-to-toggle left-button">