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

I’m trying to create both 1) groups and 2) iframes that are full page (both width and height) and don’t display a scroll bar. Getting the width right is easy enough. But, I don’t have a solution for the height and was wondering if anyone has any suggestions.

My 2 primary use cases:

  1. I’m using a background image on many pages, and it looks odd when their’s a scroll bar even though there isn’t any more content on the page below the fold. Ideally, would like to have these images be 100% the height of the user’s screen, but I don’t know how to make it dynamic based on a user’s screen height.
    Example: [link removed]
  2. I’m displaying a video conferencing iframe where users can talk with others over video conference. I want this iframe to fit the full width and height of the screen without a scroll bar. As such, our bubble app should look identical to the page we’re iframing in since it’ll be 100% of the screen width and height.
    Example of the page we’re iframing into bubble: [link removed]

Thanks for your help!

2 Likes

Try adding this in the header

<style type="text/css">
body {
    overflow:hidden;
}
</style>
5 Likes

Thanks @AliFarahat!

When my iframe is too tall for the page, this eliminates the scroll bar which is a nice option. As such, I can probably find a way to use this for the background images. I hadn’t been putting the images in an html box, but adding this code and putting the images into html seems like it’ll solve that problem. That’s item #1.

Any idea how to solve item #2? Using this same code, the iframe is still either too short or too long (for most screen resolutions). With a background image, I can just make it oversized. With these video screens, though, I need them to be nearly perfectly sized or else it creates user experience problems.

Thanks again. This is definitely a great start.

We got it figured out! Woohoo. Thanks for all the help everyone, including Salar from CoBubble.com Here’s our solution so that everyone else can use it too.

We added some JS code to resize the iframe in addition to adding the CSS overflow:hidden property. Here’s the code we’re using:

<script language="javascript">
        function autoResizeDiv()
        {
            document.getElementById('full-screen-me').style.height = window.innerHeight +'px';
        }
        window.onresize = autoResizeDiv;
        autoResizeDiv();
    </script>
<style type="text/css">
body {
    overflow:hidden;
}
</style>
<iframe id="full-screen-me" src="URL" style="overflow:hidden;height:100%;width:100%" height="100%" width="100%" frameborder="0" wmode="transparent"></iframe>
13 Likes

If you don’t mind me asking, which video service are you using?

We created our own using Tokbox which is built on webRTC. This way, we have complete control over the system, high quality video, automatic degredation based on internet quality, etc. Happy to talk further if you have more questions about video. We did our research before making any decisions so happy to share insights, etc.

1 Like

hi @sridharan.s i am setting up the tokbox API. how did you handle the authentication?
did you enter it as a header with this as key X-OPENTOK-AUTH and something like this as value?

{
“iss”: “APIKEY”,
“ist”: “project”,
“iat”: current_timestamp_in_seconds,
“exp”: expire_timestamp_in_seconds + 180,
thisisthesecretcode,
algorithm=‘HS256’
}

how do you format this part? i get an error that my token is invalid. i dont think that i can use "current_time_stamp_in_seconnds oe algorithm-H@256, etc. any tips would be fantastic!

Hi @tmuelle1, we built our video app in PHP and use an iframe with url parameters to display it within our Bubble app. I didn’t do any of the coding with Tokbox’s API so I’m not sure how it works.

Wish I could be of more help. Best of luck!

hi @sridharan.s,
were you able to do so for a group as well, not just an iframe ?
Thanks !

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.

2 Likes

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.

1 Like

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