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
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
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.
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)
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
- overflow-y: scroll !important;
- 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
Thanks, it worksā:+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