Collapsing Buttons Horizontally

I am trying to use w.fly’s solution from Collapsable Width to have a series of buttons that will collapse to the left when some are hidden. I have gone over the instructions, but it isn’t working, and I am not sure what I missed.

I setup a simple test page to rule out anything else interfering. You can see it here - if you check the box, button 5 is hidden, and button 6 should shift to the left, but it doesn’t:

Yea - I actually need to revise this! The issue is with the ID - It won’t work anymore when there are id’s on 2 separate items. I had to change up the solution to work with classes (and unfortunately it gets just a tad more complicated!!)

I used @julienallard1’s wonderful “Classify” plugin - Which allows you to put a CSS class inside of the ID field. And also the Toolbox plugin.

Here’s how I changed the ID field to have a class (make sure you install Classify plugin first):

Now, instead of putting the Javascript on the Page Header HTML, I put it inside of the Toolbox plugin.

So, on Page Load, I do this code:

Notice how I target the “bubble-r-box” above it now.

That new, updated solution works on mine now - Honestly, it’s a bit of a hassle so on my latest apps, I’ve been avoiding it. Hoping Bubble has a solution as I use the “collapsible height” everyday and it’s so useful!! Native “collapsible width” would just be icing on the cake.

1 Like

Thanks. With this info, I have made progress. Now if a button doesn’t load initially with the page, then the other button shifts to the left. Two questions about that:

  1. I’ve only gotten it to work on page load if the left button is hidden to begin with. If both buttons are shown but then some action/input causes the left button to be hidden, then it doesn’t collapse (even if I try to trigger the same javascript at a later time). Have I done something wrong?

  2. Upon page load, the elements seem to have their normal positions and then will shift once the javascript runs, so you see the buttons move. Is that to be expected?

Odd! Wish I could say I had the same issue, but I don’t. :frowning:

Took a quick look, it looks like button 5 isn’t getting the class “positionrelative” - Could be the cause?

Hmm, it looks like that is because button 5 isn’t visible on page load, but then if you check the box to show it, it does appear with positionrelative (but also overlaps with button 6 since the position isn’t changing for later actions). Subsequently hiding the button leaves positionrelative in the class.

And if I change 5 to be visible on page load and hidden by the check box, then both buttons have positionrelative in the class, but button 6 just stays where it is.

Ahh ok - Try putting both button 5 and button 6 in a group together. Then make sure Button 5 and Button 6 are right next to each other. It’s a bit finnicky…

Still no luck. Both were already in the same group, and I moved them next to each other. I also tried moving them up against the left edge of the group.

Also I noticed that if I put something to the left of them in the group that didnt have relative positioning, they’d fall in place under it.

I can still get it to work on initial page load, so unless you have other ideas, I’ll try to make that work good enough.

Thanks for the help!

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