Page elements slipping behind side bar. responsive nightmare

[ed13]

Hi all - admittedly I am new to Bubble. (about 1 month into my learning.) many thousands of thanks for any help on this -I am pulling my hair out.
I’m trying to build an app with a floating group sidebar menu (width 175) - and my main content for the page is in a group placed at X=175. (It’s actually 4 main groups with visibility set by a Page State.) -I have two stop using Bubble.io level issues.

1. I can’t figure out how to collapse the floating side bar, for mobile, and have my content groups shift left, and be selectable below the invisible floating group. (I’ve read many threads and this appears to be impossible? -what the?)
2. The content in my x4 groups, keeps moving behind the floating group when the page size decreases. It seems like such a simple thing. The position is set to x=175 - but I can’t make it stop!
   So frustrating! - kind expert to the rescue?
   newb. (Tom Brennan)
   
   
   
   
   

[rico.trevisan]

I think this whole thread my help you out:

Single-page application framework: App Shell [free tutorial]

One of my biggest struggles when building an app was how to organize the damn thing. Over the years, I’ve scrapped together a single-page application framework that I refer to as App Shell. It has worked wonders for my apps and those of my customers. Hopefully it can help you out. 1. Intro and Key Concepts 2 min [Bubble.io App Shell tutorial. 1: Intro and key concepts] 2. Building the Canvas 18 min, a bit ranty, skip if you’re advanced [Bubble.io App Shell tutorial. 2: …

[eLPDev]

Hey, @ed13! I’d say be on the lookout for an announcement from Bubble (probably in the next week) about the new responsive engine. I haven’t used it yet, but my impression is this new engine will FINALLY unlock features like collapsible sidebars because it is built using the CSS Flexbox functionality. Here’s a quote from one of the founders:

@josh

New responsive design engine: after numerous requests from the community for an ETA, we are very happy to report that we plan to enter a public opt-in beta by the end of October! The plan is to make the new engine available to anyone who wants to try it out, while simultaneously encouraging template creators to port their work over to it. Once we have enough templates in the new system, and we feel that the new system is stable, we’ll make it the default for new apps going forward. Converting an app from the old system to the new system can be done incrementally, one page at a time. We have an algorithm that will convert pages for you, but it’s not 100% perfect, so we expect users to have to manually test and adjust the output to make sure their design looks good in the new system. While the new system, like the old system, has a bit of a learning curve, the feedback from alpha testers of the new system has been very positive, and as an added bonus, the new system has much better run-mode and edit-mode performance than the old one. So, we are very eagerly anticipating the rollout!

[KeitaroNakata]

The easiest way is putting a fixed width group behind the ffloating group, and the width of the group is same to the floating one.

Floating group is literraly “float”, so other element can be under the floating element.
To avoid this inconvinience, a Group element prevents other elements to go behind the floating element.

[ed13]

This is VERY helpful thank you! I’m in the early stages of my app, and still learning Bubble so your info is very timely. I can concentrate on developing wireframes in Figma for a week or so and dedicate my time to advancing my Bubble knowledge with the new editor!

[ed13]

Thank you - Yes I played with this and think it’s likely the best work around for issue #2.
It will be interesting the see if the new Editor removes the need for extra elements AND offers Horizontal collapse!

[ed13]

I watched your excellent video series and subscribed to your channel.
I’d already stumbled onto the concept of building the site/app as a single page but your explanations and “extras” make everything work so much better!
Unfortunately, with Bubbles current functionality - things don’t really collapse left.
Your framework PLUS horizontal collapse will solve all my navigation issues!
-Also -special thank you for iconify tip!!