This is irritating.
I have a reusable header inside a groupfocus. Inside the header is a menu dropdown. So far so good.
When a dropdown is selected, then it automatically triggers the groupfocus to close, and the open header then moves to a different location on the page, because of course the groupfocus is closed.
What I want is the groupfocus to remain open when the dropdown is selected.
In the past to avoid this I used a just a hidden group element that becomes visible instead of groupfocus. That solves the problem of closing the group when the dropdown is selected.
However, when a group element is visible, it does not sit on top of the text of the page as a groupfocus does, it pushes the text down vertically to below the group element, which I don’t want to do.
How to solve?
Could you have the group element be after the text?
No, I like the groupfocus function that it goes on top of the text. I don’t want the group element to push the page text down.
Try having a fixed height in that case
I think this works. I set the group element to height of 1. The page thinks the group element is 1 tall so it pushes the page text down only 1, but the entire content of the group is still the same size and it actually resides on top of the text. I can live with that.
Except for one small detail. The group doesn’t close when the page is clicked like a groupfocus does.
Back to the drawing board.
This is a classic z-index/element interaction problem in Bubble. The native `Dropdown` element’s option list renders outside the `GroupFocus`, so clicking it counts as clicking outside, which closes the `GroupFocus`.
Replace your `GroupFocus` with a `FloatingGroup` element.
Place your reusable header inside the `FloatingGroup`.
Set the `FloatingGroup` not to be visible on page load.
Configure the `FloatingGroup`'s “Vertically float relative to” and “Horizontally float relative to” settings to position it where your header should appear (e.g., `Top` and `Both`).
Create a workflow to `Show` the `FloatingGroup` when your menu trigger is clicked.
A `FloatingGroup` will not close automaticall
Your attempt to use a regular group was on the right track, but you used the wrong element. You need an element that “floats” on top of the UI without pushing content.
1 Like
That’s really close. The only thing it doesn’t do is close when the page is clicked outside the floating group. The only way to close it is click on the trigger element again.
