Setting Max "Top" Value For Floating Relative to Page Bottom

Helpful to see the UI in my app:

With Items, Scrolled to Top:

With Items Scrolled to Bottom:

No Items:

I would like to preserve how the “Upload Files” button sits at the top with no items and gets pushed down the page as items are added. However, when the Upload Files button reaches within 10px of the bottom of the parent div, I’d like it to float there rather than dropping below the fold.

Any ideas on how to implement this? Ideally, it should be with just CSS or native Bubble rather than JS.

Why not just a group with the “Upload Files” widget as the lower part of the group? (Hide it and collapse it if not relevant to the current context.)

If I understand what you mean, that would result in the group with the widget covering all the items. I need the user to be able to click both the widget and the items above it.

There are some plugins that are for making a group a floating group. One that I created is called Float a’ Element It allows you to add an ID attribute to the element you want to make a floating element.

In this case, you would conditionally put the ID attribute onto your ‘upload files’ element based on the position of the ‘upload files’ element (as you mention 10px of bottom of parent div)…however, it does not have the functionality to detect the position of the element in relation to other elements (ie: 10px of bottom of parent container)

1 Like