Collapsable Width

Funny - I just ran into this challenge yesterday and have a solution. It requires no plugins and very little JQuery (javascript).

Now, the instructions I’m going to give you may need to be tweaked to fit your exact use case - My use was simpler than yours! However, this will give you a true collapsible width box if you’re page is structured correctly and assuming you have some CSS knowledge (I know, I know… Bubble is a no code platform…)

First, make sure that you have checked “Expose the option to add an ID attribute to HTML elements” in the General tab in your Bubble settings.

Next, slap an ID onto the element(s) you want to be collapsible. In my case, it’s the 3 buttons (one is hidden behind the edit box). I put the same ID on all of those buttons. When I hide my button, I wanted it to collapse the width so the button to the right of it filled it’s spot.

Finally, you need to get to the Page HTML Header - What I do is click in the white space around my main content area to get access to the main page’s edit box.

Enter in the JQuery code as you see it. Now, any element that has the ID of position-relative will now have code that tells it to truly collapse.

Now, as I mentioned above, this is for my use case - Very simplistic. Yours will be more challenging - However, this should set you on the path to get you onto the right track.

Why this works? Bubble uses absolute positioning and worse, the positioning is controlled by a parent div usually with “bubble-r-box” on it… If you have two boxes next to each other, they are hard positioned in the spots they are. Hiding one box still means the other box is set where it is at. By setting them to RELATIVE positioning and losing the hard left position, the positioning is no longer hard set - It’s “relative” to the boxes around it. In my example, as the “Create Scope - Keep as Draft” button is hidden, the “Create Scope - Live” button fills in its place :slight_smile:

P.S. I’m sure you went through the forum posts as I did about the “hiding rule” in the Responsive tab… That collapses width, however, only for a very very limited scenario - Overall page width. If less than 1000 pixels, hide this box. Well, that’s too limited for us. And under the hood, it still keeps absolute positioning… Just jangles around the other box hard positions. Yuck.

P.S.S. Here’s two screenshots of it working for me - Pay special attention to the alignment of the button with the box above it!


15 Likes