🪐 Spacer: a plugin to better control responsiveness of your app

[julienallard1]

Since the release of the successful Classify plugin, most of the help requests I received from developers are about Bubble’s responsive engine’s shortcomings regarding the height of elements. I, myself, faced many challenges that ended up with overcomplicated workarounds to simply have a group to adjust its height dynamically.

While the new Flexbox engine gets released to everyone and gets implemented in every app, this new Spacer plugin aims to improve the responsiveness of pages.

---

VERTICAL SPACERS
These spacers alter the height of groups the same way text elements or repeating groups do when they stretch/shrink according to their content. Their are currently 3 different types of spacers that adapt their height based on different methods:

---

Custom Height Spacer:
This one’s pretty simple. You set a height value which the spacer element dynamically follows, thus resizing the parent group(s) and the page:

It’s also possible to change the height with javascript. This is pretty useful for changes that aren’t detected by Bubble’s engine (like custom HTML):

---

Viewport Height Spacer
This spacer can sync its height with the viewport (page) in 2 different ways. Whether by a percentage of the page’s height or by imitating directly page resizes (i.e.: page’s height is reduced by 20px, the spacer reduces by 20px):

---

Synced Height Spacer
The third spacer keeps its height the same than another element’s (anything… group, repeating group, text, input…). You have to attribute the “target element” an ID and write it into the spacer settings:

---

More tools will be added based on spare time & suggestions I get…

[jared.gibb]

Can’t wait to try this out!

[alex.pethick]

@julienallard1 is an absolute ninja when it comes to this stuff! He’s helped me immensely and I can’t wait to try this out

[yorgio1024]

Awesome works horizontal?

[gbenchanoch]

I think horizontal will depend too much on the parent element’s settings for this to make sense. Bubble’s responsive engine already gives us a lot of control over horizontal responsiveness though.

[julienallard1]

No unfortunately it doesn’t… The plugin builder provides a method to directly resize height, but not width. A lot more work would be required to hack width around Bubble’s responsive engine.

Like @gbenchanoch said, Bubble natively provides more control over width than height.

I’m not closed to the idea of implementing suitable solution for width issues though…

[eLPDev]

@julienallard1, thanks for providing this! Any chance you can make it so the Target ID supports dynamic content? I’m trying to use the spacer in an RG cell, but I can’t get it to target the current cell’s index.

[julienallard1]

I believe this could be done…
Making the field to be dynamic is a piece of cake, but having the MutationObserver behind to re-target to another element is harder (at least for me).

I’ll try to give it a shot this weekend and give an update here on the thread.

[eLPDev]

Awesome! Many thanks.

[iwakinomotoye]

This is beautiful, would love to farmiliarize myself with using it.

[julienallard1]

hey @eLPDev, I just published an update implementing your suggestion. Give it a try and let me know how it goes.

I also added a “Debug mode” checkbox that will make the plugin to log a message in the debugger everytime the spacer gets a new valid ID.

[boston85719]

@julienallard1 Thank you so much for this!!! I was just revisiting my attempts at custom CSS to target the RG cell. Just tested this out and it works awesome.

I did run into some issues though when targeting the RG and a Group inside.

I setup using the spacer custom height directly in the RG. I added a group into the RG. In that group I added the Spacer Synced Height and provided the ID of the repeating group which I set to RG.

This worked fine when I have a RG setup with 4 rows and vertical scroll. If I set it to full list it doesn’t work as the group inside of the RG doesn’t get the synced height, but the RG is having it’s cell height changed. If I make the RG 1 row with vertical scroll it is the same situation that the RG cell works but the synced value for the group doesn’t.

If I instead use the custom spacer in both the RG cell and the Group and provide both custom spacers the same dynamic value it works perfectly.

[julienallard1]

I’m not sure to follow… perhaps you could PM me an access to your app

@boston85719

[paul29]

This looks very useful, however, I’m trying to limit a group height based on the page height. Basically, my page has pictures that are scaled with screen width. As they scale, they increase the height of the group. On certain screens, this pushes the buttons below the pictures below the fold. The easy solution would just be to put a max width on the pictures, however that means for certain screens, the pictures will be too small relative to the screen size. Can I use your plugin to achieve this?

Please let me know if you need some more clarification.
Thanks

[julienallard1]

I’m not 100% sure to understand your setup. It goes to say that groups adjust their height with the tallest element. So making the spacer smaller than a picture beside won’t force the group to shrink.

@paul29

[paul29]

Thanks for getting back to me. To explain in a little more detail:

I have a group that has a picture inside. The pictures are set to:

If I have a screen with a certain x by y resolution (let’s call it, for arguments sake, 2500 x 1500 (ratio of 2.5 : 1.5)) the page looks like this:

But if I have a screen with a different pixel ratio, say, 2.5 : 1.2, then the screen looks like this:

And now you have to scroll to see the full button. This is because the picture will be scaled the same way on both screen sizes but because one page is shorter, you now can’t see everything.

Hopefully that makes a little more sense.

I understand your comment about making the spacer smaller than the picture size won’t foce the group to shrink and my guess is your plugin won’t work to solve my exact issue but thought I’d ask anyway.

Thanks

[julienallard1]

Ok now I get it… You’re right, I don’t think the plugin can do much since it works with heights only and the image’s dimensions are based off the page’s width.

Although you could force the resizing with some javascript, this won’t make the whole page to adapt… You’d most likely end up screwing the design…

[paul29]

Yah I figured. Thanks for your help though and thanks for building that plugin. I have use for it elsewhere in my app.

[Arzy]

Merci!

Been looking for an hour to find out how could I simply have responsiveness with my input resize and I found this little plugin!

Why isn’t bubble responsive to “resize:both”?

Anyway Spacer Synched Height and it’s working!

[jack211]

has anyone used the new responsive engine to achieve viewport based behavior? Or is a plugin like this still necessary due to the new engine’s shortcomings? Still tinkering with it…

thanks!

jack