[Breaking Change] Popup ordering; date picker font

Hello everyone,

We’re about to release a new breaking change that will hopefully resolve some longstanding known issues. The major improvement is the way in which nested popups are ordered. Beforehand, if you showed a popup while one was already visible, the order of them would be determined by when they were added to the application. Beyond that, it would get even weirder with popups inside of reusables, as it’d be hard to tell what order they’d appear in. Additionally, any blur effects would still apply, leading to popups in the back blurring ones in front.

Now, when you “Show” a popup, it will appear on the front of the stack always. This will ensure consistency in nested popups. It also means you can have popups which appear in different orders depending on what the user does first, and they will always show correctly. Note that this has involved changing the z-index of some elements, like Group Focus, so if you use custom CSS to re-order elements, you may have to change some of the logic.

The other improvement is to the date picker - before, the font for the Today / Clear / Close buttons was the system default. We’ve now fixed it so that they mimic the font setting for the date picker.

Once Bubble Version 19 launches later today, you can upgrade to this behavior in the Settings > Versions tab. Please try it out and let us know if you have any questions!

30 Likes

Wow. I JUST experienced this while adding a new pop-up to a page. I thought I was going to have to “add code” to close the original pop-up before displaying the new one, but this saves me quite a bit of work!!

Nested popups will be more fun now! Much easier UX in certain situations

Thanks
Zubair

Thanks for letting everyone know. Is there a way you can plan these messages a few days in advance so people can react prior to the breaking change? As it stands now, you just told everyone “we are breaking your stuff, like now”…

As opposed to, " heads up, in the next x number of days, there will be this breaking change. We will give you a 1 hour warning before we initiate the change".

It’s simply easier to handle, and it shows Bubble’s commitment to transparency.

Please confirm @josh @cal if this suggestion will be considered (when appropriate).

Thank you.

4 Likes

Hi @troy.roberge - the breaking changes are only getting live, once you update your dev workspace manually to the new version (19 in this case) and then deploy into live.

That means you are completely on top of when you release the change for your application.

Best
Andreas

3 Likes

That’s good to know, I missed that. Guess my insomnia and flu got the better of me lol.

Thank you – very helpful improvement/fix on pop-up ordering. It will simplify the setup of some pages where I have multiple popups.

This popup ordering fix sorts out a very painful thing. Thank you :+1: :+1: :+1: :+1:

2 Likes

The most interesting thing to me about this thread is I have always been under the impression that nested popups are pretty much the absolute bottom of the user experience barrel. Hey, don’t blame me because a real live user experience designer told me that many years ago, and I have literally never used nested popups because of that interaction. Anyway, who knew, eh?

4 Likes

Starting from the bottom…

I had to used custom css in past to achieve that.

We use a lot of nested Popups, and previously it was a nightmare, mainly when adding new features. Thank you!

Breaking changes are always presented in terms of a new version which you can upgrade to when ready. I don’t see an issue with this at all @troy.roberge .

Great . but popup also need an option to hide when browser back cliked @cal