How to center pop-up vertically

Bubble documentation says pop-ups are centered on view port, what does that mean exactly? My popups do not appear to be centered vertically on the screen in mobile or on pc

Yes, its not centered by default. I don’t know why… This is how I solved it:

.Popup {
	top: 50% !important;
	transform: translateY(-50%);
}

Thank you so much! how did you apply this css to all your popups?

.Popup is the default popup class. Modifying it changes all of the popups :+1:

you are a lifesaver thanks!

Keep in mind, though, that the above will be problematic if the popup’s height exceeds the height of the viewport, which is not uncommon for forms and such - especially on mobile devices. Of course, that problem can be worked around by setting a max or fixed height for the popup and then scrolling its content.

A couple non-CSS options include:

  • Make the popup itself transparent, set its layout to Align to parent and don’t constrain its width or height (i.e. leave it at “Inf”) so that it fills the viewport. Then add a regular group to the center nonant, constrain its width/height, and style it like a popup. If you want the popup to close on “outside” click, implement a workflow for the “transparent” popup to close it on click.

  • Create a “fake” popup using a floating group that fills the viewport and functions as the semi-transparent “overlay” and then add a group to serve as the popup. Style similar to above.

Anyway, just a couple options and things to consider.

1 Like

I just realized a new issue, when I animate the pop-up, it animates to the wrong position, and then moves to the center after. is this due to the issue your talking about?

1 Like

I’ve never explicitly animated a popup, since the animation is built in. From your description, though, it does seem like the CSS is interfering with the display of your popup.

My best suggestion is to try the different approaches and see which works best on mobile and desktop for your use-case.

My personal philosophy is to use CSS only when necessary - i.e. when a plain Bubble implementation is just not an option. You know your UX requirements best, so just experiment.

Good luck.

Same. Let me know if you’ve found a solution!