How to put a reusable element (header) floating group in front of a page floating group?

Need help
1

I have been struggling with this for at least an hour and could use some help. Possibly this is just a bug, as I’ve exhausted all options I can think of on my own.

I have a page that includes a floating group. I have a reusable element (a header with a dropdown menu) on this same page. No matter how many times or in what exact fashion I use the Bring to Front and Send to Back on the various elements, I simply cannot get the reusable element to stay in front of the floating group on the page. The end result is that my page operates perfectly fine until I engage the dropdown menu, at which point the dropdown menu comes down, but the floating group persists visible through the reusable element’s dropdown.

I have tried moving everything in the reusable element to the front. I have tried moving the floating group in which the reusable element is placed to the front. I have tried moving the other annoying persistent floating group to the back. I have tried dozens of other random combinations and orders of specific elements within these groups. No matter what I do, this damn thing keep poking through the menu!

And to be clear it doesn’t really have to do with the dropdown aspect of the reusable element itself. When I moved the floating group up to the very top of the page just to test it, the text in the floating group continues to poke through the entire header, even though in the editor it is clearly positioned behind the header. I recreated this in the forum app. You can see it by previewing the page “floating_group_z-axis”, which uses the reusable element called “floating group testheader”.

Any help solving this would be appreciated!

1 Like
2

Have had a play … and I can’t get it to work either.

So … some things float on top of other things it seems.

Page Floating Group > Header Floating Group > Page

3

For anyone facing the same problem, I was finally able to find a solution: I put the page-specific material that I wanted (a floating group that previously kept poking through the reusable menu/dropdown) directly into the reusable element itself, behind the dropdown, and set a condition on that group so that it was invisible whenever the page name wasn’t the page I wanted it to appear on. Super-hacky, yes, but it seems to work.

@Bubble team, this definitely seems like a bug with the z-axis layering between floating groups that should be fixed at some point.

3 Likes
4

Yes, we’ll look into it.

5

@edd I think I am running into the same issue as you but not 100% sure. I created a reusable element inside a floating group and for some reason once I do that, all of the buttons become unclickable. I’ve tried reordering but can’t figure it out. Thanks for any thoughts you may have on the issue.

Thanks!
Matt

1 Like
6

How to create a fixed header @NigelG @Scott he perfectly describes this.