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

**URL:** <https://forum.bubble.io/t/display-full-page-width-and-height-and-without-a-scroll-bar/5658>\
**Category:** Need help\
**Created:** [September 1, 2016, 9:01pm UTC](https://forum.bubble.io/t/display-full-page-width-and-height-and-without-a-scroll-bar/5658 "2016-09-01T21:01:38Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![sridharan.s](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/sridharan.s/32/17881_2.png) [@sridharan.s](https://forum.bubble.io/u/sridharan.s)\
**Post date:** [September 1, 2016, 9:01pm UTC](https://forum.bubble.io/t/display-full-page-width-and-height-and-without-a-scroll-bar/5658/1 "2016-09-01T21:01:38Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![AliFarahat](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/alifarahat/32/189604_2.png) [@AliFarahat](https://forum.bubble.io/u/AliFarahat)\
**Post date:** [September 1, 2016, 9:22pm UTC](https://forum.bubble.io/t/display-full-page-width-and-height-and-without-a-scroll-bar/5658/2 "2016-09-01T21:22:35Z")

</div>

Try adding this in the header

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

---

<div class="post-metadata">

**Author:** ![sridharan.s](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/sridharan.s/32/17881_2.png) [@sridharan.s](https://forum.bubble.io/u/sridharan.s)\
**Post date:** [September 1, 2016, 9:44pm UTC](https://forum.bubble.io/t/display-full-page-width-and-height-and-without-a-scroll-bar/5658/3 "2016-09-01T21:44:14Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![sridharan.s](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/sridharan.s/32/17881_2.png) [@sridharan.s](https://forum.bubble.io/u/sridharan.s)\
**Post date:** [September 1, 2016, 10:56pm UTC](https://forum.bubble.io/t/display-full-page-width-and-height-and-without-a-scroll-bar/5658/4 "2016-09-01T22:56:42Z")

</div>

We got it figured out! Woohoo. Thanks for all the help everyone, including Salar from [CoBubble.com](http://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>
```

---

<div class="post-metadata">

**Author:** ![donaldlh](https://avatars.discourse-cdn.com/v4/letter/d/71c47a/32.png) [@donaldlh](https://forum.bubble.io/u/donaldlh)\
**Post date:** [September 2, 2016, 1:22am UTC](https://forum.bubble.io/t/display-full-page-width-and-height-and-without-a-scroll-bar/5658/5 "2016-09-02T01:22:35Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![sridharan.s](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/sridharan.s/32/17881_2.png) [@sridharan.s](https://forum.bubble.io/u/sridharan.s)\
**Post date:** [September 2, 2016, 2:44am UTC](https://forum.bubble.io/t/display-full-page-width-and-height-and-without-a-scroll-bar/5658/6 "2016-09-02T02:44:07Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![tmuelle1](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/tmuelle1/32/22458_2.png) [@tmuelle1](https://forum.bubble.io/u/tmuelle1)\
**Post date:** [October 20, 2016, 3:33am UTC](https://forum.bubble.io/t/display-full-page-width-and-height-and-without-a-scroll-bar/5658/7 "2016-10-20T03:33:35Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![sridharan.s](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/sridharan.s/32/17881_2.png) [@sridharan.s](https://forum.bubble.io/u/sridharan.s)\
**Post date:** [October 20, 2016, 3:51am UTC](https://forum.bubble.io/t/display-full-page-width-and-height-and-without-a-scroll-bar/5658/8 "2016-10-20T03:51:48Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![florent.bocquelet](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/florent.bocquelet/32/11409_2.png) [@florent.bocquelet](https://forum.bubble.io/u/florent.bocquelet)\
**Post date:** [June 16, 2017, 2:31pm UTC](https://forum.bubble.io/t/display-full-page-width-and-height-and-without-a-scroll-bar/5658/9 "2017-06-16T14:31:14Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![sridharan.s](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/sridharan.s/32/17881_2.png) [@sridharan.s](https://forum.bubble.io/u/sridharan.s)\
**Post date:** [June 16, 2017, 4:16pm UTC](https://forum.bubble.io/t/display-full-page-width-and-height-and-without-a-scroll-bar/5658/10 "2017-06-16T16:16:31Z")

</div>

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](http://upwork.com) who can write this in no time at all.

---

<div class="post-metadata">

**Author:** ![florent.bocquelet](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/florent.bocquelet/32/11409_2.png) [@florent.bocquelet](https://forum.bubble.io/u/florent.bocquelet)\
**Post date:** [June 29, 2017, 11:59am UTC](https://forum.bubble.io/t/display-full-page-width-and-height-and-without-a-scroll-bar/5658/11 "2017-06-29T11:59:49Z")

</div>

Thanks, I will look into that !

---

<div class="post-metadata">

**Author:** ![krasimir.v.rankov](https://avatars.discourse-cdn.com/v4/letter/k/cdc98d/32.png) [@krasimir.v.rankov](https://forum.bubble.io/u/krasimir.v.rankov)\
**Post date:** [August 10, 2017, 12:56pm UTC](https://forum.bubble.io/t/display-full-page-width-and-height-and-without-a-scroll-bar/5658/12 "2017-08-10T12:56:31Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ooh.alexander](https://avatars.discourse-cdn.com/v4/letter/o/a587f6/32.png) [@ooh.alexander](https://forum.bubble.io/u/ooh.alexander)\
**Post date:** [January 8, 2018, 12:17pm UTC](https://forum.bubble.io/t/display-full-page-width-and-height-and-without-a-scroll-bar/5658/13 "2018-01-08T12:17:05Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![sridharan.s](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/sridharan.s/32/17881_2.png) [@sridharan.s](https://forum.bubble.io/u/sridharan.s)\
**Post date:** [January 20, 2018, 9:41pm UTC](https://forum.bubble.io/t/display-full-page-width-and-height-and-without-a-scroll-bar/5658/14 "2018-01-20T21:41:41Z")

</div>

@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.

 ![Screenshot_5](https://us1.discourse-cdn.com/bubble/original/3X/8/6/865a655c399068cd9c1ed0a121f7d3570becd445.png)

---

<div class="post-metadata">

**Author:** ![ooh.alexander](https://avatars.discourse-cdn.com/v4/letter/o/a587f6/32.png) [@ooh.alexander](https://forum.bubble.io/u/ooh.alexander)\
**Post date:** [January 24, 2018, 5:59am UTC](https://forum.bubble.io/t/display-full-page-width-and-height-and-without-a-scroll-bar/5658/15 "2018-01-24T05:59:29Z")

</div>

thank you very much! @sridharan.s

---

<div class="post-metadata">

**Author:** ![khabazkameel](https://avatars.discourse-cdn.com/v4/letter/k/8baadc/32.png) [@khabazkameel](https://forum.bubble.io/u/khabazkameel)\
**Post date:** [March 6, 2018, 3:40pm UTC](https://forum.bubble.io/t/display-full-page-width-and-height-and-without-a-scroll-bar/5658/16 "2018-03-06T15:40:37Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![khabazkameel](https://avatars.discourse-cdn.com/v4/letter/k/8baadc/32.png) [@khabazkameel](https://forum.bubble.io/u/khabazkameel)\
**Post date:** [March 6, 2018, 3:41pm UTC](https://forum.bubble.io/t/display-full-page-width-and-height-and-without-a-scroll-bar/5658/17 "2018-03-06T15:41:20Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![scottb50](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/scottb50/32/9334_2.png) [@scottb50](https://forum.bubble.io/u/scottb50)\
**Post date:** [March 13, 2018, 9:30pm UTC](https://forum.bubble.io/t/display-full-page-width-and-height-and-without-a-scroll-bar/5658/18 "2018-03-13T21:30:09Z")

</div>

> [@Setting a group to be % of viewport height dynamically](http://forum.bubble.io/t/setting-a-group-to-be-of-viewport-height-dynamically/12700):
>
> 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…

I used that to do this:

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

 ![image](https://us1.discourse-cdn.com/bubble/original/3X/1/3/130bd6828fc9d65c40c3073b7a5e008492729e39.png)

`$(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”

 ![image](https://us1.discourse-cdn.com/bubble/original/3X/2/f/2f3a9415fbaef23a956c04ab09dc7651f980e399.png)

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

---

<div class="post-metadata">

**Author:** ![khabazkameel](https://avatars.discourse-cdn.com/v4/letter/k/8baadc/32.png) [@khabazkameel](https://forum.bubble.io/u/khabazkameel)\
**Post date:** [March 16, 2018, 10:45pm UTC](https://forum.bubble.io/t/display-full-page-width-and-height-and-without-a-scroll-bar/5658/19 "2018-03-16T22:45:37Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![scottb50](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/scottb50/32/9334_2.png) [@scottb50](https://forum.bubble.io/u/scottb50)\
**Post date:** [March 17, 2018, 11:34pm UTC](https://forum.bubble.io/t/display-full-page-width-and-height-and-without-a-scroll-bar/5658/20 "2018-03-17T23:34:02Z")

</div>

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

[Next page](https://forum.bubble.io/t/display-full-page-width-and-height-and-without-a-scroll-bar/5658.md?page=2)