I have released a plugin that fixes a major issue I faced when attempting to get an element to float (containers, input elements, and visual elements should all be made to float).
Additionally, you can set the floating position relative to the top, left, right or bottom of the container element…no longer are we restricted in terms of where we can position our floating elements.
Plus, these can be setup to be used in reusable elements, popups and floating groups!!!
I do not know as I have not built on the old responsive engine for 8 months now, and since all new Bubble apps are created using the new flexbox system, I didn’t bother testing.
Chances are it doesn’t though as the old responsive engine is a completely different system than the new flexbox system.
Popups by default are on top of everything else on your page. If you want to put a floating element in the pop up that is possible, but you can’t put a floating group on a layer above a pop up.
Thanks for the reply. That’s what I’m trying to do - make an “X” close button that floats above the popup. It’s a long popup that scrolls, so I want the close button to stay fixed at the upper right of the popup. I can’t seem to get it to work though
Take a look at the editor of the demo…the float that occurs in the popup is happening from a reusable element that is placed into the popup that is on the page
I’m not sure if there is a difference between using the float on an element placed directly into the popup or not, but my assumption is that if I built the demo with the elements in a reusable and then placed them into a popup, it might be.
For your situation, I suggest testing by creating a reusable element of type group. Put the close icon into that group and apply the float settings. Then put that reusable into the popup on your page.
If it floats as you want it to, that is great! Next step is to make it close the popup.
You would add a custom state to the reusable element that is of type yes/no; I’d call it “close popup” and when the icon is clicked set the custom state to yes. I’d also make the custom state default value to no.
I’d add a custom workflow to the reusable that sets the state to no.
Then on the page with the popup that has the reusable inside of it, I’d add a conditional workflow trigger that is ‘when reusable element custom state close popup is yes’ run the action to hide the popup.
I’d then on that page use the workflow trigger when a popup is closed to trigger a custom workflow event from a reusable and select that reusable in the popup and the custom trigger that sets the custom state to no.
