Forum Documentation Showcase Pricing Learn more

Setting a group to be % of viewport height dynamically

AWESOME!!! Thank you @brian1, I have been wanting to create elements with 100vh forever but could never figure it out. Not sure why Bubble doesn’t implement vh/vw in its default element settings? Anyhow, Thanks again.

1 Like
Summary

I can not get the jQuery code to run no matter what I try. I even added the jQuery CDN link and nothing. Ideas why this is happening? I was under the impression jQuery should work by default in Bubble, seeing as how it has in the past…

Edit: Seems the primary reason for jQuery not “working” this time around was due to me using a floating group. I did try changing the div.bubble-element.Group to div.bubble-element.FloatingGroup but the dimensions on the floating group are ‘stuck’ and not able to change… I couldn’t find an answer using Google for why this might be. My only guess is Bubble has JS running that restricts FG sizes.

What I’m going after is very similar to the sidebar in the Bubble editor:

Dynamic content, inside a 100vh scrolling box. I can get the 100vh standard Group, but making an internal dynamic group scroll and look like this (matching 100vh) is turning out to be very difficult. I’ll update here if I find a decent workaround.

Great stuff, i was looking for this! Thanks very much, @brian1!

Hi @brian1, I’m trying to use your setting to have a 100vh page and thank you, this is very useful.

Now I’m trying to create a full-page map, but I can not achieve it.

My setting is:

  • A group
  • The little HTML inside the group <div id="anchor"></div>
  • The map in the same group
  • The workflow with the javascript

The group is 100vh (I can check it with the color background) but the map is not 100vh.
You can see my test here: https://digitaldomus.bubbleapps.io/version-test/mappa

Please can you help me? Is it possible to achieve it?

Thank you very much

I can’t see that this demo works @brian1, unless I’m missing something…

When viewing the demo in firefox, the repeating group doesn’t scroll to the bottom of the list when the browser is shortened and page reloaded.

When viewing the demo in chrome, the repeating group doesn’t scroll at all.

I tried several attempts at CSS over here: How to make Repeating Group height dynamic to fit screen resolution? but I get the same result unfortunately.

Researching the forum, it seems Bubblers have been asking for this for some time. It would be great to have this feature, and would mean we could have resizeable repeating groups with vertical scrolling (perfect for apps!). I’ve asked @emmanuel but the feedback is that custom CSS is not supported. Reading between the lines, I’m assuming it would be a real headache for the Bubble team to provide this otherwise I’m guessing it would already be with us, or at least they would be saying it’s on the way :wink:

So it seems that vertical scrolling in a repeating group can only be used for fixed-height UX, not resizeable for multiple viewport sizes. Unless anyone has a good suggestion?

Hey @brian1

I tried your example, and it works perfectly. I have a question though. How can I modify the code in such a manner that if I have two groups stacked on top of each other where the first group is 100vh, and the group below it is displayed at its set height?

Right now if I have two groups on top of each other, i am unable to scroll down.

3 Likes

I really can´t thank you enough, awesome, thanks!

This event of a window resize, should this also work for the phone? I set up my phoneapp using this snippet, and it corrects the 100vh indeed. Just when I tilt my phone horizontally it stops working:slight_smile:
So I was wondering whether it should really just be copy and pasting this snippet and the snippet doesn´t work, or I am doing something else wrong right now:slight_smile:

Thanks!

The demo from @brian1 doesn’t seem to create 100% width, but I might be missing something. But what I still don’t get is why this isn’t a simple feature when this already happens in Bubble when you use popup elements, they center on any screen and have a background color that is fullwidth and height. Couldn’t there just be a similar element that isn’t a popup?

Was this plugin available in the Bubble Plugin store? If so, I’m no longer seeing it.

@pflu0008 I think he’s referring to the plugin called “Toolbox”

1 Like

try something like

group height: 200px (as minimum as you can).
map height: 1000px (as maximum as you can).

it worked with me :+1:

“release” the scroll

Blockquote

Remove this
; $(".main-page").css(“height”,“100vh”)

you could say css(“height”,“auto”) as well.

4 Likes

Hi guys,

I’m not able to find this JavaScript Toolkit Plugin, is it still online somewhere?

Is this solution still the best solution for dynamic sizing?

Seems to work for me @lorenzo. Plugins “Toolbox” or “Plug Bubble” both worked to the same effect.

I tried this with a popup (reusable element) but couldn’t make it work. Anything I need to consider? What I want to achieve is a full screen slide show.

Is there a way to vertically center the content in that full-height group?

FYI, I found a way, but it is a dirty one. I would be glad if someone can share a more elegant manner to do this (especially, one that would allow having a fixed height for the vertically centered element).

In the editor, I set up everything at the top like this:

The white group was the group I wanted #vertically-extended and the red element was a button I wanted to get #vertically-centered (I just wanted a text but I used a button because it keeps the text inside vertically centered when it is dynamically resized, unlike a text element).

I directly exposed the IDs of all elements in the app Settings so I didn’t have to add any HTML element in the groups I wanted to modify but simply to specify the relevant ID at the bottom of the contextual element menu of each element.

Here is the JS run upon loading:

$(document).ready(function(){
$(".main-page").css(“height”,“100vh”);
$("#vertically-extended").css(“height”,“100vh”);
$("#vertically-centered").css(“height”,“10vh”);
$("#vertically-centered").css(“margin-top”,“45vh”);
});

I defined a relative height (10vh) for the red element and a corresponding top margin (45vh) to get everything perfectly centered. I could not find a way to define the margin in a manner that would work with a fixed height for the red element (“auto”, “middle”, “50%”, etc. did not work). I guess this is an easy one for the JS experts out there :slight_smile:

The result:

Here is the link to the editor:

Edit: finally found the way to have a fixed-height element vertically centered (need to position the element 50% down from the top of the viewport and then move it back up by 50% of its own height):

$(document).ready(function(){
$(".main-page").css(“height”,“100vh”);
$("#vertically-extended").css(“height”,“100vh”);
$("#vertically-centered").css(“top”,“50vh”);
$("#vertically-centered").css(“transform”,“translateY(-50%)”);
});

1 Like

@Lucien @brian1

Dear Both,

Would there be a way to have a Bubble group (or element) anchored to the bottom on the page while not to allow this group to go up beyond other groups above?

This would be useful in case (like mine) where a page is not tall enough for a fixed footer while if I use floating group then it will look good on a PC while floating group will go over the content on mobile devises.

Perhaps, there is a way to capture screen hight? Then we will be able to show and hide groups and floating groups as necessary depending of screen height?

Thanks in advance.

Alex