šŸŖ Spacer: a plugin to better control responsiveness of your app

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 :ringer_planet: 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:


:one: 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:
custom

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):
js


:two: 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):
percent vp sync vp


:three: 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:
sync


More tools will be added based on spare time & suggestions I getā€¦

27 Likes

Canā€™t wait to try this out!

@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 :grinning:

1 Like

Awesome :fire: works horizontal?

1 Like

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.

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ā€¦

@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.

1 Like

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.

2 Likes

Awesome! Many thanks.

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

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.

1 Like

@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.

Iā€™m not sure to followā€¦ perhaps you could PM me an access to your app

@boston85719

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

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

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:
image

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

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ā€¦

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

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!

:pray:

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