How to adjust Popup to Not hit bottom of screen?

Questions
1

Bubble is automatically stopping the scroll of a page now when a popup is displayed (great improvement)…what this is causing is an issue when your popup is of dynamic height because of the use of collapse height when hidden on groups contained within the popup.

I now have a lot of popups that have the bottom of the popup hitting the bottom of the page causing for an ugly UI because my popups have been styled to have a border/shadow.

It seems like Bubble is not automatically adjusting the popup position to be centered on the screen when they are also automatically stopping the scroll of the page (which will render the height of the page as that of the device from my understanding).

How are people adjusting their designs with use of popups to accommodate for this UX flaw? My first assumption was to add a spacer to the bottom of the popup, and to contain all elements in a group and style the group to have the border/shadow and remove it from the popup element itself (definitely not what I want to do).

Does anybody have an easier fix? Perhaps a way to get the popup to actually just be centered vertically on the page so that there is an equal margin between the top and the bottom of the page instead of what Bubble is doing now which is just a large margin on the top and zero margin on the bottom.

2 Likes
2

Ever work this out?

3

Sort of but not really. Reached out to Bubble support and their engineers confirmed what they do is not something they intend to fix.

Apparently the goal for Bubble is to make sure that the popup is centered horizontally and vertically. In that vertical center attempt, they do make changes to the top margin but not the bottom margin when the popup requires more height.

Because of that and the lack of interest in making the behavior more in line with what I and I assume most other users would expect, which is to make sure that the top and bottom margins are always the same (ie: the popup is always centered vertically), it is up to the developer themselves to figure out a workaround.

Workaround would require custom code and some thought about the usage of greyout settings on popup and types of elements used inside of it.

One thing I’ve done is make it so the greyout is 100% white, so looks like blank screen and then I have the container groups inside of the popup have the borders to represent the sides of the popup in essence. So user perspective is that the group inside the popup is the popup. This does make it possible to use some settings to ensure there is always a bottom margin.