Forum Academy Marketplace Showcase Pricing Features

Group responsive height

Does anyone know of a way to keep the aspect of a group stay the same when responsive?
I need to let the group expand to 120% when page is stretched, but also expand 120% in Y.

I have a group the size of about a credit card, It’s not big enough to fill out the full width of a mobile screen, I can easily fix that by allowing it to expand in width, but you’d end up with a very funny shaped credit card.

I don’t think there’s a native way of doing it, but maybe someone’s worked out a hack?

I’ve exhausted the usual stuff with hidden group, floating groups etc.

Zerocode has a plug in, that might work, but can’t find much about it on the forum. Has anyone tried and had any luck with it?
(No, signing up for a plug in subscription and cancel it, is not a proper way of doing stuff:))

As of now I might have to resort to swapping the group out for a mobile version, but with a one page design, it’s essentially running a mobile version of the site. Not very responsive eh! haha.

cheers

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.

2 Likes

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! :slight_smile:

1 Like

Not in front of my computer right now, but for sure something could be done with some custom CSS or javascript through the plugin Classify.

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

containing boxes (also
) which gather elements (groups, button, inputs…)

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.

1 Like

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).
I had to configure the shape to also resize. This means that every element you add into the card group has to be configured to properly resize and reposition in the card dynamically. And using only CSS (no javascript) the only reference you have for adapting the size is Viewport’s width (vw), so every component is a percentage of the viewport… It makes things a bit complicated to calculate…

resize

I think that a viable solution would be to include some javascript in the solution. I’m thinking about an event listener that resize/reposition everything when dimensions of the window change.

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:

1 Like

Hi Julien

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 :yum:

Adding/removing classes through the ID field requires the plugin.

1 Like

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! :stuck_out_tongue_winking_eye:

I wasn’t expecting an answer. Glad it worked!

3 Likes

@casheets123, @julienallard1, @boston85719

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.

1 Like

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…

1 Like

Hi @julienallard1 and @casheets123 ,

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:

Any tips?

Best, Peter

1 Like

Did you ever figure this one out?

Yes. I abandoned CSS tinkering and use floating groups.