Forum Academy Marketplace Showcase Pricing Features

[SOLVEDish] Is it possible to keep two floating groups in place when screen resizes?

I have two floating groups: a sidebar and a sidebar “slide out” pane. When I check the responsiveness of my app, I see that the “slide out” pane gets forced “under” the sidebar when the screen hits a certain point, which I’m sure is due to the min-width on a group on the page. Is there any way to force the “slide out” to not collapse?

Grey = Sidebar
Purple = “Slide Out” Pane
Pink = Group for page content

Here’s a link to this example:

  1. Editor: Testsample01 | Bubble Editor
  2. Preview: Your Bubble app

Hey, just took a quick look

Floating groups can be weird to work with. But I have another solution if you’re okay with changing how you structure the page out. I’m not sure what your use case is so this may or may not be helpful.

Instead of using two floating groups, you can use one floating group that’s transparent and two normal groups as your sidebar and “slide out” sidebar that are within that floating group

They will maintain their size but still be floating!

Sample with changed types

Link to the editor

I remade your page for you here, I only did the workflow to show and not to hide but she works! Give that a try!

Thanks for the quick reply, @anthony.schanen. I tried to view the editor but am getting a “user not able to view” message.

@eLPDev Forgot to allow users to view. I swapped the permissions. Try it now

Oddly, I’m still getting that message when I click?

Oops. Changed it on the wrong app. Try again NOW hah

Thanks! That did it. This certainly closer to what I want. However, I noticed that the transparent floating group overlays any underlying elements in the standard group, rendering them unusable even when the slide out isn’t visible. Is there a way to solve this?

Are you talking about elements that are within the pink group being overlayed by the transparent floating group?

That’s correct. I just applied the technique you suggested in my app and cannot interact with buttons that display beneath where the transparent portion of the sidebar overlap with the group below.

Just updated the demo app earlier to show problem.

If you need buttons right there what I would do Is make the floating group the size of the grey side bar and remove the slide group entirely. That way it isn’t over the button.

Now instead of putting that group into the floating group. Make the slide group a “group focus” element. And select its reference element as whatever you want it to be next to. you can set the offset etc when you configure the focus group.

That way when the slide menu is not open, you can still click what’s under it. Does that make sense?

Check out the editor again

Ah. Thanks for that. Unfortunately, I’m looking to animate the pane so it slides out/in. When set as a Group Focus, it overlays everything when animating. :frowning: Plus, I need the menu to persist until a user dismisses. Wish I could make your solution work, though.

I just figured out a “hack” that makes it so the “slide out” group doesn’t collapse. Definitely not a true “solution” but gets the job done.

In summary, I increased the “slide out” width so that it’s X is 0 to match the left of the page. This ensures it doesn’t collapse when the page collapses.

For mobile, I then use workflows to just show an alternative “slide out” pane that doesn’t have any blank space. Updated the Editor link in case anyone has a similar issue.

REALLY looking forward to the new Responsive Design experience; hoping it will solve these issues.