Keep group ratio/proportions

Hello Bubblers,

I saw different posts but I’m still struggling with responsiveness and the issue of group height.

I have several groups organized as a Tile menu (like Windows 8 metro ui). When the page stetch, the tiles are stretched only in widht, not in height.

How can I tell Bubble to keep the proportions of my groups? Meaning stretch both widht AND height…

Thanks a lot!

Matt

Editor

Preview

1 Like

I don’t think this is currently possible. Bubble has some real limitations when it comes to dynamic element height. There are probably some workarounds using Javascript and HTML that better devs could advise on, but I’m pretty sure you can’t do this with built-in functionality.

1 Like

thanks @andrewgassen
I tried the html/JS work aound, unfortunately it stretch the main group but not the element inside…

That’s a serious limitation though…my dashboard looks ridiculous on a larger screen :disappointed_relieved:

This may interfere with the responsive settings of the elements within each group, but try placing a shape inside each group, as the background color so it extends the height and width of each card. Then select ‘keep element in proportion as the page is resized’ on the shape elements. That might work! :slight_smile:

5 Likes

thanks a lot! Works great! As you mentionned, I need now to see how elements within the cards could stay centered/aligned…

:v:

1 Like

Did you get this solved, @mattmazzega? I’m in the same boat.

Ideally, I’d just be able to set a text element to ‘Keep element proportions as the page as resized’, but obviously that’s not an option. I also tried to put a shape behind the text element, but as soon as the page is resized, the text ends up being lower and lower in relation to the center of the shape.

Hi @philnauta
Unfortunately, the same here. What I did is limiting the max size of the shape and also make the text bigger when the page reach a certain width. Not ideal but in doing that, It makes the result a bit more clean regarding the text center and proportion…
Good luck!

I found a workaround that’s kinda cheating but works.

You can use an “Image” element that has the “Fixed aspect ratio” option and use it as an invisible container that pushes the group.

Hope that helps

1 Like