Floating Action Button

Floating action buttons are nice, with one solution here:

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

WHgNJg2a6J

You can also do this…
uEv5LwbcWP


Clone link:


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'
14 Likes

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

2 Likes