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