Group Focus in Group Focus visibility problem

[florianherzog]

Hi Y’All

I have a reusable element (Reusable Element 1) that toggles a nested group focus on click (GF A). Within that GF A I have placed another reusable element (Reusable Element 2) that toggles another (nested) Group Focus (GF B).

When I toggle GF B within GF A, GF B doesnt show. I have a condition on the button ‘Dokument’ that changes the background color and font & icon color when GF B is visible. When I click the button to toggle GF B, the condition evaluates to TRUE but the GF B isn’t visible.

I tried to add an html tag with z-index: 10000; but this didn’t solve the issue.

Does anyone understand, how bubble handles Group Focus and how to potentially make my intended solution work? I tried as well with a popup but this doesn’t work propperly either and in UI terms it’s much better to have a Group Focus imo.

Would really appreciate some help on this issue.

Here are some screenshots of the elements

screenshot of app- toggled GF A

screenshot of the editor for RE 2

screenshot of the application with ‘toggled’ GF B

Best
Florian

[tylerboodman]

@florianherzog

z-index: 10000;

Try doing z-index: 10000 !important;

Also I had a bug with GroupFocuses where it flickered visible for a split second when it was supposed to stay visible, is it doing that for you? I had to schedule a custom event to show the GF 0.1 seconds later

[florianherzog]

I added the z-index to the button that triggers the Group Focus as well and now it works. No flickering at the moment.

No I’ve ran into the problem that the GF A (z-index lower Group Focus) hides, when clicked inside GF B, as it registers it as a click outside the GF A. Any idea how to solve that? I think I’ll have to resort to using a popup.

[boston85719]

@florianherzog

I’ve ran into the problem that the GF A (z-index lower Group Focus) hides, when clicked inside GF B, as it registers it as a click outside the GF A. Any idea how to solve that?

Why does GroupFocus close when clicked outside of it

I think I figured out a piece of it <style> #element_always_visible { visibility: visible !important; display: initial !important; } </style> This works so long as the page width doesn’t change as the groupfocus will remain open, but it does not track the reference element as the reference element moves with the page width changes. EDIT This works so far as the page width doesn’t change quickly. The group focus will remain open and doesn’t close when clicked outside a…

Just be careful using this code, it is going to cause issues with Bubble built in ‘is visible’ settings, so work arounds will be needed.

[florianherzog]

Using a popup doesn’t solve the isse as a click in the popup gets registered as click outside the Group Focus as well. Will try boston85719 solution.
Thank you for the tip with css @boston85719