Floating group inside reuseable element on top of page

I have an SPA with REs for each page. Inside one RE/page, I want a floating group that will serve as a kind of widget like below:

Trouble is, this Floating Group is defined with reference to the RE’s position, rather than the page. That means it sticks to the bottom of the reuseable element rather than the bottom of the page.

You can see that in action here as you can see where the RE ends:

Any solutions? It’s basically essential that the floating group is within this RE in the editor as it references a lot of data from there and needs to interact with it. Is there an editor solution? Or custom CSS?

My instinct would be to make a global FG that is on the page and pulled outside of the RE. Then use states to transfer the data to and from the RE. With a conditional to show the FG, or a “do when” workflow that is looking at custom state to trigger an animation in.

I barely do this because the editor makes it a pain to see my custom states on the RE when I’m on the index page.

If you’re a true RE purist, you could also make the FG a reusable :joy:

Yeah, I really don’t want to do this because we’ll be talking about dozens of variables being played with :frowning:

Yeah I completely get it. That’s a frustrating trade off.

State management of REs outside of the RE editor, would be a killer update.

I’m sure there’s some ChatGPT hack with custom code, but that just feels like overkill for what we’re trying to do here.

I hope you didnt start moving the Floating group away from the RE.
You only need a tiny CSS injection :slight_smile:
Put this in a HTML element anywhere on the page.

<style>
#floating-group {
    position: fixed !important;
}
</style>

Just replace floating-group with the id of your floating group.

2 Likes

This is why coding isn’t “dead”.

Hope that works for you @georgecollier

Worked a treat, I was hoping there’d be a simple CSS solution! Thanks :slight_smile: