Is it possible to force the height of a group?

Hello Bubblers!

My web app is composed on a main header, which is a group (image background) containing other groups.

Is there a way to force the height of this group, so that it can adapt to any screens (laptop, mobile phones,…)?

I found a way using Javascript, but the problem is that this group was resized, but the other groups of my page were not shifter (so the first was overlapping the following one, not nice…)

Many thanks for any feedback or ideas to test!

Have a nice weekend, take a rest and don’t Bubble night and day :smile:

Use Toolit plugin and inside this plugin there is a Herosizing element that will allow you to make the viewport height responsive.

1 Like

Many thanks @shpak.serhiy, not sure to see what you say but I’m going to look at this further in the toolbox plugin!

You can use an html element on the page and use some code like in my screen shot

Screen Shot 2020-10-17 at 9.18.36 PM

100vh is equal to 100% of the viewport height…100vw would be equal to 100% of the viewport width

you would need to put the html ID Attribute onto your element

You should install the classify plugin which provides for a lot of useful functionality of CSS through HTML elements…I believe for the above to work you would need to install the plugin. Once it is installed you don’t need to do anything else with it


Wow, THANKS @boston85719 ! :+1:t2::+1:t2::+1:t2:

It works as expected, many thanks again @boston85719

The only issue I have to resolve is that if a background image is set to a group, resized using this method, the group is correctly resized but the image isn’t. Weird…

I suppose the image is set as the background style and of type image? If that is the case it is strange that it is not resized properly.

Yes, the image is stored in the database, and set as the dynamic background of the group, with type image. I’ve tried to remove any image transformation (from Bubble and from imgix), but the image still does not stretch to fit the viewport width and height, set both to 100%. Indeed, it’s strange.

But the group itself is correctly resized to match the 100% width/height, so I will try to remove the background image, then insert a new group in this first group, containing a mn image and I will try to resize both the group and the image itself.

Hum… Unless the image size is to small, in that case maybe this image width and height can’t be extended?

I would try first with a larger image to see if that is the case…if not then you can apply the same code to an image element

I try with a high res image, and same result. The group is resized, not the image.

But I also noticed one thing important : this group is a header, and in my app, I propose 2 kinds of headers to my users. So depending on their choice, one of the 2 “header” group is hidden. And problem : if I use the html element + classify to resized these groups, when they’re supposed to be hidden I got them displayed, but empty… So it seems this resizing method does not work with hiddable elements.

Put a conditional onto the html element and use the html only when that conditional is met

I use this method to create a full page image for a popup

1 Like

Wo, great idea! I’m gonna try

This topic was automatically closed after 70 days. New replies are no longer allowed.