Fullscreen popup

Hi guys i am trying to use popup on my app that i am working on i am trying to use popup for login/signup but unable to make the popup fullscreen. Do any of you know how to hack this?

Note: I have a custom width for the page set to 1400px

2 Likes

I’ve done it by using a group, not a popup. Basically, you create a group that is full screen, then show/hide it using a workflow.

4 Likes

Hey that sounded great until I tried: where do you put this group-as-popup? I’m trying to make this a full screen popup menu, and so I placed it under my header, but it’s not showing up when pressing the menu button? Where should the group be placed? Under the header or on the page?

1 Like

I did this using floating groups in my app, so you don’t have to worry about the placement

1 Like

Hi @myth,

Just add css to the popup screen like below,

div.fullwidthpopup { width: 100% !important; height: 100% !important; position: fixed !important; top: 0 !important; left: 0 !important; margin-left: 0 !important; } div.fullwidthpopup .bubble-r-box , div.fullwidthpopup .RepeatingGroup, div.fullwidthpopup .HTML{ width: 100% !important; height: 100% !important; }
8 Likes

Where should I add this code? Can you please guide?

Just add HTML element and inside paste above code like

<style>ABOVE CODE</style>

1 Like

Hey @manikandan, just gave this a shot but it’s not doing anything beyond a normal popup. Am I missing something simple? Sorry if I am.

I set the ID Attribute to “fullwidthpopup” and added an HTML element (with above code) inside the popup element.

1 Like

Hi,
Enable “Expose the option to add an ID attribute to HTML elements” from the Settings tab → General.
After that, add a value to the “ID Attribute” input box like below

and then, add new HTML element and append the style tag with <style>div#YOUR_ID_ATTRIBUTE{width: 100% !important; height: 100% !important; position: fixed !important; top: 0 !important; left: 0 !important; margin-left: 0 !important; } div.fullwidthpopup .bubble-r-box , div.fullwidthpopup .RepeatingGroup, div.fullwidthpopup .HTML{ width: 100% !important; height: 100% !important;}</style>

11 Likes

Beauty. Thanks @manikandan.

Had the ID already… added the # and that made the pop-up go full screen. BONUS.

I’ve got a PDF inside an iframe (inside the popup) and I’m trying to get it to work on both web and mobile. Your solution works great on web, but both the small and full-screen views of the PDF are broken on iOS (Safari and Chrome).

Any insights here?
Here’s the editor: https://bubble.io/page?type=page&name=pdf2&id=al-test&tab=tabs-1
Here’s the app: https://al-test.bubbleapps.io/version-test/pdf2

2 Likes

Hi @myth or anyone else,

Does this work on IOS. I still havent found a fix for this.

Thanks

Is there a way to add a scroll bar to this popup?

I’ve got something that I think is working on iOS…I just did a quick test on my phone and it seems to.

I’m using a floating group instead of a popup element. I incorporate some CSS in HTML element to get the page to stop scrolling when the floating group is visible, and I use some CSS in HTML element to get the floating group to be full page height and width.

Here is a link to the page

Probably what it needs to really work well on iOS is to add a scroll bar to the floating group. I have a scroll bar that gets added on Chrome, Safari and Firefox on my desktop, but it doesn’t seem to work on iOS.

@mangooly I’ve got something working right now that I think is about as best as can be done for my purposes at least.

My concern is not to have a full screen popup, but one that fits all my elements, is able to be scrolled and is completely responsive all while the page is not scrollable and the popup remains in a ‘fixed’ position.

On my page I needed to have several HTML elements (I suppose somebody who understands code can do it in one HTML element) to set some CSS to keep the page from scrolling, to keep the position of the popup ‘fixed’ at the top. There was nothing needed to get the popup to scroll, it happened automatically, assuming Bubble default behavior for popup overflow, and what is best is the popup scroll works on mobile, while the page stays fixed and un-scrollable.

Screen Shot 2020-10-17 at 1.50.57 PM Screen Shot 2020-10-17 at 1.50.41 PM

My popup is a normal popup and in the editor it has the following setup

My assumption is that if you want it to be full screen you can set the width to be the same as your page width…for me the full page width was not necessary.

Also, you can change the top position of the HTML popup fixed position to be lower if you like…in the following gif video my position was set to 60px (just below my header element).

Before I set this up my popup on mobile would move around on the page when I switched views between ticket selection and order summary as the heights were different…having the popup position set using HTML stopped this and naturally when the height changes because of the dynamic data it sometimes fills the height of my mobile screen and is scrollable.

Also, the code posted by @manikandan can be adjusted to remove the position:fixed and that should allow the popup to be scrollable as the fixed position CSS removes the ability to scroll (I figured that out when using fixed position on my page to stop the page scroll)

popup.mov - Google Drive

I was unable to post the GIF as the file was too large (I think Bubble changed some settings to limit file size)

4 Likes

Yes, i understand.
try to add style to the css

  1. overflow-y: scroll !important;
  2. overflow-x: hidden !important;
    Sure, will get scrollbar on fullscreen popup window.
2 Likes

hi which html elements did you use to stop the page from scrolling… I’ve added the ones you’ve mentioned here but the popup just scrolls with the page as before… thanks

1 Like

you need to add the id attribute page to the page

1 Like

Thanks, it works​:+1::+1:

Hi @boston85719 , hope you are doing great , do you create / have online bubble’s tutorials about this subject :

  • Create custom domain (newdomain.mydomain.com), is it a possible to create feature like this using bubble ? I saw some bubble’ app using custom domains ,or they used different method ?
    Thanks in advance
    BR

I do not have a tutorial on the subject. There are some plugins that allow for ‘white label’ domain or ‘multiple domains’ and they may be worth checking out. I have never used any so can not recommend one.

There is also the feature to host your app on a subdomain, which may be another topic to look into.

1 Like