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:
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>
Install the JavaScript Toolkit Plugin. This will give you the ability to run JS within a workflow.
Create a new workflow for the page, using the “On Page Load” starting point.
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>
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.
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.
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.
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
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?
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.
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:
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?
