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:
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.
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.
@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.
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.
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.
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ā¦
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ā¦
Spacer plugin aims to improve the responsiveness of pages.
Custom Height Spacer:
Viewport Height Spacer
Synced Height Spacer
works horizontal?
