<style>
body {
overflow: hidden; /* Prevent the whole page from scrolling */
}
.max-height-group {
height: 100vh; /* Set height to 100% of the viewport height */
overflow: auto; /* Ensure content inside can be scrolled if it exceeds the viewport height */
}
</style>
<script>
function setGroupHeights() {
var groups = document.querySelectorAll('[id="100vh"]');
groups.forEach(function(group) {
group.style.height = window.innerHeight + 'px';
});
}
// Set the height on initial load
setGroupHeights();
// Adjust the height when the window is resized
window.addEventListener('resize', setGroupHeights);
</script>
Copy past this into an html element. Go to any group that you want to make 100vh, and set their ID Attribute to ‘100vh’.
checkbox enable: allow vertical scrolling for that group only. This will scroll the individual group
Bubble’s editor doesn’t provide a direct option for this, but you can achieve it with the following steps. This code ensures that groups with the ID 100vh will adjust their height to always match the viewport height and will allow scrolling within the group without causing the entire page to scroll.
I took about 4 hours one day trying to understand why what should work in a responsive design didn’t work in bubble.
I was finally able to come close to figuring it out by understanding how bubble handled parent groups. Even though the fix worked, it still wasn’t perfect.
I did use some code to come close but I still wonder why Bubble can’t do this.
It does, which is by way of the layout tab, and the height settings and setting the minimum height to 100%, which if the element is a child of the page, it will fill 100% of the page height. So this is slightly different than 100vh which can be applied to elements that are child elements of other container elements. If the container element has height to fit content, and the child element uses the custom code for 100vh, then the container will expand height so as to not allow overflow.
For elements that are containers that have content that might overflow and you want a scrollbar, there is the checkbox for ‘allow vertical scroll on overflow’ for a group element.
It should be noted to for anybody who may use this code without being fully familiar with it, the overflow:hiddenwill make it so no element will scroll, as well as the page. The .max-height-groupwith setting of height to 100vh is always going to be the height of the viewport, which in some instances on mobile devices which have the web browsers address bar visible, will be greater than what the user can view, because of the address bar.
Also, this can be achieved without Javascript and just use basic CSS within an HTML element and to apply the HTML ID to the target element. Put the HTML element onto the page and make sure it is out of the way and not in view of the user, as it is there simply to provide the HTML/CSS to apply to the target element.
@munaeemmmm is your use case for this for mobile design purposes?
Made a slight tweak to your JS/CSS that worked better for my use case – posting here in case others might find useful. Great idea overall! Sometimes I hate how much we have to work around Bubble limitations, but this is clever.
<style>
body {
overflow: hidden; /* Prevent the whole page from scrolling */
}
</style>
<script>
function setGroupHeights() {
var groups = document.querySelectorAll('[id="100vh"]');
groups.forEach(function(group) {
group.style.height = '100vh';
group.style.overflow = 'auto';
});
}
// Set the height on initial load
setTimeout(() => setGroupHeights(), 200);
// Adjust the height when the window is resized
window.addEventListener('resize', setGroupHeights);
</script>
