Adjusting content width

Hello everyone. I have spent several hours trying to find a way to implement below layout, but still couldn’t do it. Is it at all possible?

Here is the issue. I have two areas (panels) on my page which together take 100% of page width (when both are visible). When hiding the right panel, I want the main panel automatically stretch to 100% page width.

Thanks a lot in advance.

1 Like

Hi @ryparken,
If you are doing this for responsive options then that would be possible (hide < 300px for example). If you need to run this on a trigger, then unfortunately that’s not not something you can do natively in Bubble right now as there are no options for collapsing width. Here’s something that may help:

If you are using this for a responsive purpose, that would be quite simple:

Hi Matt. Thanks a lot for the quick response. The right panel is hosting “properties” of various elements in the left panel. However, user may want to close the Properties panel as it is not always needed. In such case, I want the main content expand to use 100% of the screen real estate.

So, if I understood you correctly, it is not possible at the moment. I will check the other suggestion in a moment. But do you know if this is something that Bubble is aware of and may be working on? This behaviour is kind of basic for HTML/CSS and other programming tools.

Cheers!

No problem. There are quite a few posts on the forum about this if you have a quick search. I don’t see any plans to implement at the moment but know that bubble are currently working on a redesign of the responsive engine. Hopefully that will resolve this, and a lot of similar issues that could be easily rectified (if just working with vanilla HTML pages for example).

It may be possible with the plugin CSS tools, but I haven’t tried this with stretching widths.

1 Like