Hi all,
I’ve been working towards vertical responsivity for some time now. I managed to use CSS to make my Repeating Groups stretch perfectly to any viewport. But, the problem is they only stretch the RG image, and not the actual list (the data cuts off at the size of the RG set in the developer, even when it stretches to a larger viewport).
Here’s what I have.
First, I change settings to allow me to add ID’s to elements.
Now there is an option at the bottom of the element editor to set an ID. I set the ID of my RG to list
Then I drop an HTML element onto the page.
and add the following code into that HTML element
this identifies the element ID (list) then sets the height to the entire viewport (100vh) minus the size of the footer (175px)
It also makes sure the RG doesnt shrink further than the smallest size I want (min-height).
Perfect, problem solved.
The result is a RG that stretches with the viewport like so:
The problem is, this list contains more data after “hello”.
The list stretches, but the data does not.
This makes this solution useless…
I’ve tried many other solutions, from invisible groups, to herogroups (plug in) to zeroqode’s plugin, and others.
Zeroqodes plugin is great, but suffers the same problem as not stretching the data (and also only deals with percentages which doesn’t work for matching groups of different starting sizes. Anyways, if you want to stretch non-repeating groups, Zeroqode’s plugin is easy to use, its here: Dynamic Height and Width Plugin | Bubble
Ultimate Toolkit’s Herosizing is great for moving elements around based on viewport height (css and zeroqode do not move elements when they stretch (they stretch on top of each other)). This is how I managed to get the footer to be at the bottom of the page no matter the viewport. Its limitation is that it cannot stretch elements. Here is the tutorial for hero sizing: Toolit Kit - Hero Sizing Element Video Tutorial )
In this thread a few people attempt to tackle this exact issue I am experiencing: 🔥 Classify 4: A tiny plugin that brings CSS classes and + - #100 by boston85719
Unfortunately, I either do not understand their solutions or, as I believe, they are not good solutions.
Anyways, my problem is that I need to stretch not just the RG but the data inside it. Does anyone have any ideas about how to fix this? Is there something I can add to the CSS to stretch the RG properly?
Thanks!!!
P.S. bubble please make vertical responsivity. You can detect viewport size, you can size groups, put that together and you have vertical responsivity! You have horizontal already, screens differ in height as well. Seems like a pretty important feature. The amount of hours I’ve put into this app for it to become useless in the end because it doesn’t fit any phone is crazy, and browsing the forums I can see that countless people have been dealing with the same problem for a long time. Just a suggestion.