Resuable Popup not fitting to content width

Hi,
Is anybody having problems with “fit width to content” with the new responsive engine?

I’ve ticked all the elements inside my reusable popup “collapse when hidden”. In the example below elements have maximum widths set less than the popup’s.

But the popup is not fitting to the width of the elements inside the popup.

I don’t have this problem with the height.

Any ideas?


Here is the reusable popup in the index page of the editor:

Here is the reusable popup in the reusable element editor:

1 Like

Having the same problem… Did you ever find a solution?

1 Like

Having the same problem in my app. If I give it a fixed width or a max width, those apply just fine; but the fit-to-width (and, more problematically, the fit-to-content-height) features seem to be completely broken.

Any tips for getting my popups to grow instead of just scrolling internally?

1 Like

Same issue!

Same issue

Same issue…

Same issue here @josh, can you provide any insight here?

Is there going to be an answer to this? I need a reusable element to be responsive to the height of the page I put it on, without having to change anything. @josh @superforge Hoping I tagged the right people.

I had the same issue and found a great way to handle this! After so much time trying different methods, the solution was actually simple to implement.

Ensure the first level under your Popup is a Group (preferably set to Column). You will set this group’s min. width, height, fit to content, background color, etc. as needed.

image

Next, go to the popup and set the Background style and Shadow style to “None”.

image
image

That’s it!

3 Likes

Works perfectly, thank you for taking the time to share this!

No, it does not work. At least not “perfectly”.

The popup is still there at a greater width, just not visible to the user. This means if the user clicks on the supposedly transparent area which is inside the popup, the popup does not close, because it is still there.

This can be worked around by introducing a click event which closes the popup, but then the cursor is affected while in the popup area (it becomes the “hand” click cursor).

This is a usability issue and a bug, the proposed solution is subpar.

Do you have a better solution to share? Correct, it is not a “solution” as the issue is with Bubble. Calling it a workaround would be more appropriate. I hadn’t seen any other steps that would work, and although yes it is invisible to the user so click to the left or right doesn’t exit, it is better than nothing.

I’m still seeing this issue that fit height to content ticked on a reusable element, just doesn’t consider the content that is present on the reusable element page …

Thanks for sharing this fix @bradey. I’ve been struggling with this for about an hour!