Floating action buttons are nice, with one solution here:
Here’s an alternative approach that allows you to achieve the following:
You can also do this…
Clone link:
https://anvil.works/build#clone:EHTH3QEANLDIAKIL=STHCV2RX3RFUNKJ6HOUOWJDX
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'