Forum Academy Marketplace Showcase Pricing Features

Trouble with new responsive design. Adding a "close" popup group

Need help Responsiveness
#1

Hey Bubble fam,

First of all, love the new responsive design. It’s a no brainer now that I’ve figured it out.

But I have run into a problem. I need to have an “X” icon in a group in the top left of my screen. When it’s clicked, the popup closes. See image below.

image

Problem:
When I add it as a normal group, it pushed aside the other groups given the new responsive layout.

Solutions I tried:

  1. I tried adding a Floating Group that disappears when the user starts scrolling down the page. This stops the “X” icon from moving down the page when the user scrolls. BUT since it’s in a popup, when the user scrolls down and then back up, it is finicky and the “X” only returns after you try a few times to get to the top of the page.
  2. I’ve added a Group Focus and attached it to the top element, then changed the position of it on the page. But it doesn’t show when I toggle it or show / hide it.

Can someone please tell me the best solution for me to use that will not break?

Thanks so much!

#2

Hi Henry

I couldn’t agree with you more about the new responsive design. it is too awesome.

Please see the below layout to help adust your icon.

Follow the error to put your icon on the left side.

image

image
image333×619 15 KB

Cheers

Kind Regards

#3

Can you clarify whether you want the X to be positioned relative to the popup or the screen? IOW, do you want it in a fixed position in the upper left of the entire screen, or do you want it offset from the popup so that it scrolls with the popup?

-Steve

#4

I think I have a suggestion. But can you share a design where do you want ‘X’ to be ideally?

#5

I’d like it to be fixed in the top left hand corner, 8 or 16px out from both the top and left side of the mobile screen.

#6

Well, you could try this approach, but Bubble applies a default margin, so for even more control, you could simply create your own popup using a group nested within a floating group.

The parent FG would be set to inf width and height so that it covers the viewport and would serve as the semitransparent “overlay”, and the group inside would be styled like a popup and contain the content. Your close button would be the first child of the FG and remain in the upper left.

If you wanted the close button positioned relative to the popup’s content, just make it the first child of the content group and use negative left/top margins to position it “outside” the group. In other words, it would be inside hierarchically but outside visually.

-Steve

#7

I need the X to be fixed in the top left hand side of the popup.

#8

If you use the popup solution, how can people interact with the original popup underneath it?

#9

I’m sorry, but I don’t understand your question. I provided 3 different variations to try in lieu of your current approach. None of my suggestions were intended to be in addition to or on top of an existing popup. Your original post says nothing about “layered” popups.

Here’s a working example that I put up on Buildshare of the floating group approach I described.

Good luck,

-Steve

#10

Thank you. The solution where I make the margins negative is the one that I used! Appreciate the help :smiley:

1 Like