Forum Documentation Showcase Pricing Learn more

Setting a group to be % of viewport height dynamically

#1

One of the struggles with Bubble can be the dynamic setting of a group’s height, for instance having an element be 100% of the viewport height.

Here’s how to do it:

  1. Create a small HTML element in the group you want to target. Inside of it create an empty div, and assign it a class or ID (in this example I used an id of “anchor”)

    <div id="anchor"></div>

  2. Install the JavaScript Toolkit Plugin. This will give you the ability to run JS within a workflow.

  3. Create a new workflow for the page, using the “On Page Load” starting point.

  4. Add the following Jquery to the workflow step:
    $(document).ready(function(){ $("#anchor").parents("div.bubble-element.Group").css("height","100vh"); $(".main-page").css("height","100vh") });

Thats it. The page will not set itself, and the target group, to be 100% of the vertical height of the viewport. You can adjust those values as needed (for instance, if you wanted it to be 75% of the viewport height, just set the height of the parent group to 75vh.

To handle the event of a window resize, also add this script to the page header:
<script> $(window).resize(function(){ $(".main-page").css("height","100vh"); }); </script>

Hope this helps!

36 Likes
How do you have 100% height and width without overflow or whitespace?
Viewport Size Hieght/Width
Google map layout (full page map - height responsiveness)
Converting a multi-page app to a single page mobile app
Uncaught ReferenceError: $ is not defined
Native mobile app responsive Height & Text elements
What is an actual working method to get page height to dynamically match visible content?
Making an element fill view port height
What is an actual working method to get page height to dynamically match visible content?
Where do I add JS
Display full page (width and height) and without a scroll bar
Responsive height in app
Page/Group height should adjust to screen height
Mobile Screen Responsiveness
#2

Example? Please…

#3

Demo: https://viewportdemo.bubbleapps.io/version-test

#4

This is great, thank you for sharing.

Do you know if it would be possible to have a Bubble Repeating Group inside this 100vh height div with a scrolling overflow? I’d like to place Bubble data in a sidebar in this fashion but would need it to scroll down for extra entries or small screens.

#5

I don’t see why you couldn’t. All that is being done here is some dynamic css. Look at it now - I’ve added a scrolling repeating group.

1 Like
#6

Awesome! You have solved 4 or more different problems for me in one forum post.

#7

In reality you can probably just stick the first script in the page header as well. Haven’t tested it.

#8

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
#9
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.

#10

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.

#11

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

#12

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

#13

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?

#14

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
#15

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

#16

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!

#17

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?

IOS 11 Extremely Weird Input Behavior
#18

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

#19

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

1 Like
#20

try something like

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

it worked with me :+1: