How to Make Floating Group Float Beneath the Page - Reusable Element

Questions
1

I have a reusable element that is a ‘Group’. In the reusable element, I have a floating group that is set to beneath the page. The reusable element is placed on the page.

The problem is that the floating group elements are visible and accessible (ie: button can be pressed). So, when the floating group is in a reusable element, the float beneath the page doesn’t function properly.

I reported a bug but support response below indicates it will not be fixed

Hi,

Thanks for waiting. I’ve spoken with our Engineering Team on this, and they explained that, because the Parent-level reusable is a Group, the entire reusable will function as a regular Group.

Floating Groups must exist at the Parent level to retain their functionality, so to get this to work, you would need to change the reusable itself to a Floating Group, and change the interior container to a regular Group.

Let us know if this doesn’t make sense, or if the problem seems to be deeper than this. I hope this explanation helps though! Thank you.

Is there any way via custom code to force the floating group to actually be beneath the page? I tried using some css and setting z-index to -1000 but that doesn’t seem to work.

From my tests and Bubble response it seems like it is not possible to get a floating group to float beneath the page, if that floating group has been added to a reusable element.

2

So this is not possible to be done. As Bubble engineers have explained the floating group inherits its parent elements functionality. So if the reusable element is a group, the floating group in the reusable will also function as a group.

But be it as I am and never one to let Bubble beat me, I figured a way to get my desired functionality/design.

  1. Make the reusable element (in my case as a group)
  2. Add a group to the reusable element. Make this group no min/max width/height so it will fill the entire reusable element. Set a background color that is 100% opacity.
  3. Use the group from step 2 as the main container for all other elements that are required in the reusable except for the floating group (obviously because a group can not contain a floating group – well yes it can with a plugin or custom code).
  4. Place a floating group into the reusable and set to float beneath the page.
  5. Put reusable onto page.

In this setup the floating group is not actually floating beneath the page, just beneath the group in step 2, so it still provides the necessary functionality of a floating group set to float beneath the page which is that all elements contained by the floating group will not be visible or accessible to the user, the data of elements in the floating group will be accessible to all elements in the reusable and the elements contained within the floating group will not interfere with the responsive design/layout of the reusable and page the reusable is placed on.