Forum Documentation Showcase Pricing Learn more

Display full page (width and height) and without a scroll bar

I haven’t recently tried to do so for a group. That said, it seems to me that there are new features / capabilities within Bubble that make this a whole lot easier.

Make the group full width is easy. Just need to manage responsive setting appropriately.

For height, I think the easiest way may be to set it via Javascript. Elements now have custom ID’s which make it easy to select the right element in the JS and then resize it to be full height.

Furthermore, there’s a plugin called “Toolbox” (I believe) which makes it easy to run JS as an action within a workflow. So, you could set-up the JS to reside the group on page-load.

That’s be my recommended solution. I can’t write the code myself, but you can likely either find something for this in the forum, search online, or hire someone on upwork.com who can write this in no time at all.

Thanks, I will look into that !

Do you mind explain how did you accomplish this page size - https://cobubble.com/

@sridharan.s Scott, may I ask you to explain how to insert this code into a page?

@ooh.alexander, there are several ways you can insert code in Bubble. We put ours in the page header for this because this way it’s read / interpreted before the rest of the page loads.

To do the same, select the page and then edit it. Scroll down to the Page HTML Header section and input your code there. This places it in the head of the page so it’s read / interpreted before the rest of the page loads.

1 Like

thank you very much! @sridharan.s

Have you figured out how to make an element the full size of a page?

Have you figured out how to make an element the full size of a page? I’m trying to do the same thing and cannot figure out how.

I used that to do this:

Using Plugbubble plugin (:clap:), add some Javascript for when the page loads:

$(document).ready(function(){ $("#anchor").parents("div.bubble-element.Group").css("height","100vh"); $(".main-page").css("height","100vh") });

Then create an empty html element and don’t show it on page load. Set the id to that element to “anchor”

It took some tinkering in the Responsive editor, but it worked out well.

3 Likes

Thank you very much for your response! So I added the HTML block and the code, but what exactly is supposed to happen? Is the HTML block supposed to resize, and how do I use this to resize a shape?

Put the html block in a group that you would like to be the length of the browser window.

1 Like

Ok Thank you!
How would I pick the positions of other things on the page in relation to the size of the group. So if the group is very large, then how would I make the stuff below it go farther down the page? How would I make things in the group, like text, be at the very top or bottom of the group no matter how small or big it is?

The best way to do this is to view the page in the “Responsive mode”. You will be able to see the different viewport sizes.

If you keep the html block on the top level of the page, the page will fill the entire browser window.

Thanks for the reply.
So then how would I keep certain text elements in the group in certain places relative to the full page?

Like, how would I keep a certain element x percent from the edge of the shape?

Why can’t I scroll my page when I use the html group and the following code? $(document).ready(function(){ $("#anchor").parents(“div.bubble-element.Group”).css(“height”,“50vh”); $(".main-page").css(“height”,“50vh”) });

It worked 98%
Only my Nav-Bar still floating above i-frame.

Hi @tmuelle1
I am facing a similar issue with Opentok, (Token Format invalid). Any chance you can share how you overcome this issue?

Cheers

Sorry @Guillaume229 I was never able to figure it out.

No worries, I finally managed to implement it using the approach from @willtaylordesign here : WebRTC Video Chat Plugins - Need Help