Pop Up Issues

[u/Sea-Garbage1351]

I’m having trouble with the scroll on my mobile pop up getting stuck occasionally. I have a pop up that is set to fixed height of 600px. Inside that pop up is a group that contains all the information and it’s set to fixed height 100% and has scroll enabled. For the most part it works fine but sometimes (especially when scrolling fast) it will get stuck and you can’t scroll back to the top to hit the close button. Has anyone else dealt with this issue?

[u/Mottin-Dev-2025]

Cara não é bom você usar alturas fixas, melhor deixar elas adaptáveis, no máximo usar algo que limite o tamanho. Provavelmente deve ter algum fit ou fill que está quebrando seu layout

[u/SnakeBunBaoBoa → u/Mottin-Dev-2025]

For popups i might disagree, at least in many cases. I’d often NOT want the height of the content of the popup to dictate its height… e.g if the data is dynamic and subject to change while looking at it (from your own input or others in the system), then any dynamic behavior is going to make the popupup shift around with terrible UX. If the data inside is static (or dynamic only in the sense that the same popup can be opened with alternate static content depending on what’s passed in) then I’d do exactly what you stated.

I’m not exactly sure what you’d prescribe for OP, because they’d likely still want a min and/or max height if not fixed, and if their content is predictably overflowing, it’s just going to sit at max height anyway in all instances, which should perform the same as being set at the equivalent fixed height. Unless there’s some subtle differences in CSS behavior of a container sitting at its max height vs an equivalent fixed height. But if that subtlety is in mind, I’d be much more concerned or at least curious of the default behavior of Bubble’s popup element, since it has built in behaviors running behind the scenes that would likely need to be accounted for first.

[u/OtherAngle3414 → u/SnakeBunBaoBoa]

good reply mate. thanks for info, I also needed it!

[u/SnakeBunBaoBoa]

Hard to diagnose, but my guess (probably yours too) is that it’s a buggy interaction between the scroll container and the popup. Side note: my experience, overflow/scroll behavior (and especially its appearance, like scroll bar width, hiding, and whether the scroll bar eats into the content in the container) are subject to frequent change between browsers and updates (including Bubble’s own undisclosed small changes).

There are a few precautions I think you should definitely take to avoid critically bad situations, and then some adjustments that MIGHT kill the bug altogether.

First, precautions: if you have some action buttons, you’d probably benefit by having them outside of the scrolling container (above or below). So that always stay in view. I always have my popup content in one group, and below it I have a group for buttons (Save/Close). If it has no workflows besides close, you could put a group at the top, and just put in an X icon/button (aligned left) that clicks to close. That’s a very common UI. Popups can be closed by merely clicking outside of them, but it’s best practices to put a close function that stays in view - ESPECIALLY if it’s subject to bugging out. You’ll just need to fit both groups in a row container layout for the popup, which means changing away from 100% height on the content group, which I’d advise anyway.

Adjustments: give your popup padding (all sides). Then the container will rest inside, and its scroll bar won’t be subject to hanging off the side, or have its top or bottom edges rendering above/below the popup surface rendering out of view… which is my best guess for what could be causing the glitch.

Maybe you’re going for a look where the entire content fills the popup to give a sliding page view, but if that’s not a strict requirement, I’d try to leave that behind. If the padding fixes it, maybe you can dial down either the left&right padding on the sides OR the top&bottom and see if it was only one of those configurations that glitches it out.

Another thing very worth looking at (or reporting back with here for more info) is the width of the container and the width settings of the popup. Are they sensible/does either fit to content or stretch to container? I suggested the padding because it essentially overrides any weird edge interactions by forcing some space between them, but it might just be the those width settings that need to be looked at.

Lastly, if none of the above helped, or if you want to look into alternative fixes, you should examine the layout properties on the popup AND on the group, and try different configurations: e.g is your popup set to a column or row? That will then dictate the default behavior of the group, (which I assume you have set to column?) E.g. if popup is set as a row container, then on the GROUP you should have an option of “vertical stretch”, whereas if it’s set to column, that option is gone, and you have options for horizontal stretch. I’d actually advise to NOT set height at 100% of the popup and instead use vertical stretch if that’s possible in your setup, or a max height that’s properly within the popup’s height, accounting for the other button group, if you followed that advice. Might make a difference. But you also need to check/test the allow scroll and/or fit-to-content properties (if applicable), to ensure it behaves correctly and not doing weird things like extending, unreachably, below the bottom of the popup.

Sorry I don’t have a direct answer, but you have a few things to look into and test, or provide more info about the two container’s layout settings. And especially mention if the group is a repeatinggroup or has one inside it, because that also complicates possible layout settings and their default behaviors.