Responsive pop-up for login/signup functionality

[jeff2]

I’m trying to get the login popup - which seems to be ‘fixed’ by default , to respond correctly on mobile devices down to 320px. There appears to be no way to alter the element’s conditional width. Is this correct? Also no option to set a ‘fixed’ or ‘aligned to parent’ element (absolute positioned) to a percentage of the parent’s width - the page wrapper in this case.

[mmahirf]

Hi Jeff. Any reason why you have selected fixed width for the popup? If you are using the new responsive editor then column or row would be a suitable layout.

[jeff2]

Hi There,
‘Fixed’ is the default responsive layout that Bubble sets for the popup parent. If I override it and set the parent as a column, it breaks in the live app - the min/max width and height settings no longer apply with Bubble overwriting these in the published app.
Am I missing something obvious? Fixed popups are HTML and CSS basics so I’m confused why it won’t behave as expected in Bubble.
Also, Position Fixed and Position Absolute are both highly responsive HTML settings so I equally confused as to why the ability to set conditional widths is not available. Am I also missing something here?
I can write custom code which fixes it but that is a messy solution.

[deejay.shani]

Hi Jeff… A screenshot pf the “Broken” popup would definitely help understand the issue at hand. Also, make sure that the popup, as well as all the elements inside have a minimum width of 320 or less (exact number depending on the padding, margins, etc., if there are paddings, or margins applied, then the sum of those should be subtracted from 320)

[jeff2]

Hi Deejay,
thanks for looking at this.
Two screenshots attached:
Parent set to fixed is displaying correctly but is not responsive below 360px . I can either override settings with jquery or set the parent to a width of 320px. Neither is a desirable solution.
Parent ‘set to column’ is broken. Min width is 320px. Max is 360px but is quite clearly exceeding its max-width (the inspector has it at 490px).
Max height is also being overridden by Bubble which is causing the overflow issue.
Please note that all margins, padding and widths on children are correct and checked. My background prior to testing Bubble for suitability is fullstack but that does not mean I’m not missing something obvious specific to Bubble.

[mickceb]

Hi @jeff2 and welcome.
With the responsive engine that’s easy as shown below

You just need to put a minimum width equal to 320px (or less to have a little margin) and the max to what you want. Et voilà!

Hope this helps

[deejay.shani]

There could be a few reasons for this. I will list them here:

1. Overflow : there is the scrollbar which means that the max height is set to less than the required height. Try increasing the max height or check the “Fit height to content” checkbox if available.
2. When you get the content on the far LEFT side and a white space on the RIGHT, 99% of the times it’s one of the child elements breaking the Barriers, with minimum width set more than the parent element itself. If you are unable to find the exact problem, try using the “CSS PEEPER” extension if you are using chrome. It will show the bounding box of each element when hovered. This will help you identify exactly what is causing the popup to break.

Also, once again check the margins and padding wtr to the 320 limit. There might have been a missed value.

[deejay.shani]

One more thing to check if there are any dimension changes in the conditionals (of the popup, as well as of the child elements) that might have caused this.

[jeff2]

Hi There,
Thanks for the help.
Can you show me a screenshot of it working correctly in the preview app? I can make all this work in the designer, no problem. The issue is in the preview. If the parent is set to column, my width and height settings are overwritten in Preview mode to width 490 - height 530. CSS Peeper is confirming the problem in Preview

[jeff2]

Here’s a screenshot of the designer followed by the preview:

[adamhholmes]

As it’s a reusable element, check the responsive settings for the element on the actual page where it’s being used as well.

[jeff2]

Ok, so solved it by rebuilding the popup from scratch. The original came from the Bubble.io boilerplate, which clearly does not convert to the new responsive engine without errors, not apparent in the designer.