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.
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’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.
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).
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…
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:
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…
