Collapsable Width

Anyone able to achieve collapsable width for groups? I want to add a side nav bar when extended it will push the entire page to the right to make room for the width of the nav bar and vise versa if the side nav bar hidden.

It’s not possible natively in bubble you can try javascript for this.

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

Hey @w.fly

Thanks for that post, I have also come across a situation with two buttons just like you showed.

Can you paste the code here as text format?

Also I think HTML headers only work on paid plans, but perhaps you can put it in an HTML element if the app is not on a paid plan yet.

@w.fly does this actually impact and affect responsiveness for other elements? i was under the impression…certainty from my testing that although it does duly adjust the width of the specific element the remain page elements remain unaffected.

<script>

$( document ).ready(function() {
$("#position-relative").parent().css({“position”:“relative”,“left”:""});
});

1 Like

Well that’s the fun part - It only impacts the elements you tag with that ID. It’s like the Matrix - You have to “unplug” them from the absolute positioning… However, I could see that leading into some pretty nasty unintended consequences with the Bubble responsive engine… Once you’ve unlocked something, it could lead to a cascading effect - “Well, I’ve impacted these 3 elements… however, now these 4 elements need to be unlocked… wait… doing that causes the page to just break badly on mobile”.

1 Like

Could something like this be re purposed to include the content that would need insife the sliding container?

Just a thought

JB

But although the collapse width can be done with jQuery, it would be really nice to have this option as a native Bubble function, like collapse height is already there. Are there any plans on this in the near future?

1 Like

I haven’t had time to make an example, but I thought I would just explain how I do this without using any code.

  1. Create a group the whole size of the page.

  2. Create a group on the side (i.e. floating group on left side)

  3. Make the first group have a left border the same width of the second group.

  4. Change conditionally the visibility of the second group as well as the first group’s left border.

This has allowed me to make nice menus that show up on the left side while it pushes the screen to the right.

Hope this makes sense and is helpful. I haven’t had time to put together a demo. I thought I had one around here somewhere. If I can find it I will share it later.

9 Likes

Collapse margin also makes the page group occupy the entire page when sidebar group is not visible of course when the page width<=“some_value”.

Here is the example I made. Hope this helps. This was all without any code.

View: Bubble Application
Editor: 805menuslide | Bubble Editor

Want to learn more for free? 👨🏻‍💻

Subscribe to my free tutorials at the
:clock4: NoCodeMinute on YouTube :grin:

Dancing%20Small

7 Likes

Can @josh or @neerja tell us if this will be added. It should be fairly simple to add a collapsing width.

1 Like

This topic was automatically closed after 70 days. New replies are no longer allowed.