Floating Action Button

[stucork]

Floating action buttons are nice, with one solution here:

Material design circular 'action' button?

Welcome to the Forum, @08435855! You can style a button to achieve this using Roles. Create a Role and assign it to your Button - I’ve gone with circle-button. Clear all text from the button and assign it the fa:plus icon - or whatever icon you want. Then in theme.css (which can be found in Assets), add these CSS rules (inspired by this snippet): .anvil-role-circle-button > .btn { font-family:Verdana, Geneva, sans-serif; font-size:18px; background-color: %color:Secondary 700%; /* Alte…

Here’s an alternative approach that allows you to achieve the following:

You can also do this…

---

Clone link:

Login

---

How it works:

I created a new template copying and pasting the standard template and adding an extra div element:

    <div class="content floating">
      <div anvil-slot-repeat="float" class="anvil-measure-this"></div>
      <div class="placeholder drop-here anvil-designer-only" anvil-if-slot-empty="float" anvil-drop-slot="float">Drop a ColumnPanel here.</div>
    </div>

so now the design view looks like this when you switch from the standard-page.html to standard-page-floating-button.html

a bit of css made the floating slot float

.floating {
    position: fixed;
    right: 45px;
    bottom: 45px;
}

I created a round-button role with some css to make buttons round
All the floating elements are inside a column panel and standard python to make things visible on click:

  def action_button_click(self, **event_args):
    """This method is called when the button is clicked"""
    visible = not self.button_like.visible
    self.button_like.visible = \
    self.button_twitter.visible = \
    self.button_comment.visible = visible
   
    self.action_button.icon = 'fa:times' if visible else 'fa:bars'

[celsius878]

Thanks @stucork! I followed your example and adapted to simulate an infinite scroll in my application.
You saved my day!
Thanks!