Although I havenât tried the new responsive engine yet, Iâm pretty sure viewport based behavior is possible since itâs based on CSS Flexbox.
This spacer plugin will most probably (hopefully) become obsolete in a year or soâŠ
Hey.
I really love this plugin, especially with the new responsive engine. Right now with the functionality it has, your plugin is still irreplaceable.
I found a small bug though. Itâs not really your pluginâs bug, rather the way ios handles viewport height. When you start scrolling and the footer disappears vh changes. And that looks quite ugly. It can be solved with JS, but it doesnât help with your plugin. Maybe you would want to address that issue? It (and the solution) is described here in more detail:
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:
Text expand/shrink options:
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 
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!
Makes sense 
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âŠ