An idea but never tested. Put an image (transparent) in the group and send it back. Full width and height. In responsive setting, choose keep aspect ratio.
Ah great idea! Did a quick test here, and it looks like that might just work. Doesn’t even have to be full width, 1px in X and the minimum height I want to allow in Y and the group won’t shrink below that height.
Looks like it might work for repeating groups as well. Need to try it out proper and run it on a few devices and screen sizes. But it’s promising!
I installed your plugin, super simple to use. Love it!
I did try some different CSS height properties, but couldn’t get it to do anything. I might
be doing it wrong, or perhaps bubble’s CSS is overriding the CSS height properties from
the plug in?
I tried something simple like height: 150px; just to see if it would make the group 150, but
it didn’t. I’m probably doing something wrong here.
I did run some other CSS on the same group, like drop shadow, which worked perfectly.
I know that the way Bubbles render pages is by lines
So maybe you’d have to alter more than your group.
I might have time to try something this evening. I’ll send you a demo if it works
I’ve tried using CSS in the past and always ends up with some odd unintended consequences in terms of the positioning of the group element. Usually what happens is the group element moves off the page or somehow causes the entire page to move off screen.
I just tried looking for an app that had it on there but apparently I’ve since deleted it.
Yeah when I was searching to forums for a CSS solution I came across a number of people who
had run into issues when using CSS on bubble.
After some more testing the image hack does work. However I did run into a problem where
the group will stretch, but any content won’t.
I needed a line of text to stay at the bottom of the group. So I came up with another solution.
Instead of using the image, I was able to achieve the same result by using a conditional to set
the bottom line of text’s line spacing to increase when on mobile. This forces the group to grow in height. It also had the added benefit of being faster to iterate, and potentially also faster to load.
Ok I’ve been able to do something but I haven’t found an easy and direct way to do dynamic resizing in respect of the aspect ratio. In the GIF below, it’s a group (the card) with a shape in it (representing the chip).
Or even better, I think, would be to build the card completely manually into an HTML element. You could probably achieve something great using CSS Flexbox.
Here’s a link to the demo. There are 3 elements in the page: the card-group, the sim-group and the HTML element that contains the CSS classes:
I am trying to recreate what you put together. I can see your template is working correctly on preview mode.
I’ve tried copying the page into an app and unfortunately I am not getting the group height to resize.
Do you think there is an issue with bubble causing this?
I tried it in my app I am developing and saw the issue. Then I created this test app to try again but still no luck on getting the height to resize.
you forgot to install the plugin Classify
Adding/removing classes through the ID field requires the plugin.
Oh crap. I completely forgot to reply to you Julien, after all the work you put in. So sorry.
This worked great, and since I’ve been using the classify plugin for other things… it’s a fantastic little plugin!
you better be sorry!
I wasn’t expecting an answer. Glad it worked!
Are you all still using Classify for responsive heights?
I am trying to decide on that vs Zerocode’s Viewport plugin vs Toolkit vs Flexbox.
I use classify plus a ‘browser’ plugin
one of the many things the browser plugin does for you is returns two different heights…One is browser height the other is screen height…I believe the browser height includes the URL search bar (I forget, but one of them is better than the other for getting ‘page height’)
I also use classify to change position of elements and it has proven to be very powerful and has improved my design abilities dramatically.
Flexbox is not a plugin; it’s rather a CSS way to handle elements position for a responsive page. Bubble does not use flexbox.
If you plan to code your own HTML instead of using Bubble’s graphic elements, then you should go all-in with flexbox.
For my part, I first try to make my app work with the tools provided from the platform. But due to it’s limitation I always end up using Classify and Toolbox. Until now I haven’t had any issue with the plugins…
I get things resizing using Classify, but I can’t seem to get my repeating group inside to fill it up and be scrollable. What I want to do is this:
the desired end result being:
Did you ever figure this one out?
Yes. I abandoned CSS tinkering and use floating groups.
I just released a new plugin to automatically adjust a groups height based on different reference points like page’s height or another element’s/group’s height.