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

hey @quantumind, thanks for the positive feedback. I haven’t had the chance to work with the new responsive engine yet (haven’t even see what it looks like). You telling me that the Spacer plugin is still relevant with the new engine is kinda a disappointment. This plugin really was meant to be a workaround while the new engine came out…
Anyways…

I wasn’t aware of the ios 100vh issue, I’ll give it a look in the near future and update this post any release notes here.

Thanks for pointing this out!

Hi all, I have read the thread but unsure if this plugin will solve my use case.

My single page app has a main ‘index’ page of 2000px high with many individual groups inside with vary in heights.

My footer remains all the way down at the bottom of the index page, whilst some groups are only 300px high. Collapsing and hiding groups makes no difference, the index page always remains at the height you initial set, in my case 2000px.

@adamhholmes kindly suggested I make sure that each container group is the same height (i.e. 2000px) then have an extra hidden group within each container that takes up the space between the bottom of the content and the bottom of the container group (i.e. with a height of 2000 - the content height), and set that group to collapse when hidden.

This is a great idea but wondered if the spacer plugin could be an easy fix?

Are you using the new responsive engine? I haven’t worked with it yet so I can only help with the original engine.

Spacers have the exact same effect on page’s height than collapsing groups, except that in contrary to collapsing group, you get to decide the height of the spacers. So if you can get it to work with groups, you can most certainly get it to work more easily with spacers.

@julienallard1 I am using the original engine. From what you are saying, the plugin will only be useful is making groups longer than their content? This is the opposite to what I need, I need to shrink the index page to the height of whichever group is showing.

No, spacers can also shrink down the page as long as is does not hide elements. So if out of the 2000px height there are elements from the top down to, let say, 500px, a spacer will be able to shrink the page down to 500px high.

Try making your footer as a Floating Group fixed to the bottom of the page…

Thank you for the info. I actually found a solution by adding a hidden group below the main group and the bottom of page, information here.

Also, a floating group would not work as a footer because they have an absolute position, so would always be at the bottom of the longest page.

1 Like

Hi, I have the same problem, a page with several groups of different sizes, is the spacer useful? Honestly, I don’t know how to use it.

The spacers elements act the same way then collapsing groups or text element that expand/shrink to fit their content. If you know how to use them, you know how to use Spacers.

Collapsing group:
Screen Shot 2022-01-17 at 07.23.12

Text expand/shrink options:
Screen Shot 2022-01-17 at 07.24.28

Link to Bubble’s manual on groups
Link to Bubble’s manual on text elements

any update on that?

still no update… I haven’t forgot though. I read on the subject and I think it will be harder then I thought to implement a workaround.
And now with iOS 15, the search bar is at the bottom of the screen; does this mean that iOS 15’s Safari has a different VH than previous ones?

Hello !
This is an impressive plug-in, great job :smile:
I was wondering if this could be used in a RG, to make sure the height of the cells are always the same even though the content might be different.
It almost works in my test, but it sometimes works and sometimes doesn’t …


Do you know if it can be done, and how ?
Here’s the link to my app if you want to check : Test-filters-eyepax2 | Bubble Editor

Thanks a lot !

hey @evodev
I just checked your app and the plugin version is 0.0.1 which was only for experimentation. You really should upgrade to the latest 1.1.0

Thanks for that, I did it.
But I can’t seem to make the tiles’ height identic in the whole RG. How do you suggest I do it ?

The spacer is in the Group within the RG, and I tried syncing it with “Group Main product tile_Dummy” & “RepeatingGroup Coworking” and the issue is the same

One thing I noticed is that the ID tile is attributed to a group in the RG, thus all tile groups have the same ID. If there are 10 tiles then there are 10 tile ID. The spacer element can’t know which one to pick.

You should instead give dynamic IDs to the tile, something like (tile-Current cell’s index) and figure out a dynamix expression in the Targdet’s ID field of the spacer to point to the correct tile.

What’s strange on my app is that the groups I want synced, it seems like the groups I have the spacer element in, create room for the Target ID group, but doesn’t actually sync the size. Let me know if you have any ideas as of why. Thanks!


Screen Shot 2022-03-07 at 1.47.07 PM
Screen Shot 2022-03-07 at 1.47.13 PM

Makes sense :sweat_smile:
But wouldn’t that make the tiles’ heights the same on each row, and not all the same? Is there any way to make sure that all the tiles are the same height, no matter the row ?

Ok I thought you wanted to same height only for tiles that are side by side. In that case my guess would be to use a custom height spacer rather than a synced height. Their height can be set with a custom javascript function.

The function’s job would be to find the highest tile and adjust the spacer in accordance.

I’m not sure to follow your explanation…

Good idea, thanks ! I’ll check it out and let people know if it works this way

FYI: In the new responsive engine this is possible without a plugin.

1 Like