Having problem with displaying a floating group

I made a floating group to show users more actions, e.g., viewing their account settings, saving products, logging out, etc.

The problem is that this floating group is automatically displayed. It should only be displayed when the user clicks on the “more” text
This is what it should look like:
Screenshot 2024-03-13 023359

And obviously, once you click more, the floating group is displayed.
but instead the floating group is automatically displayed on the page like this:
Screenshot 2024-03-13 023756

What do I do to keep the floating group hidden and for it to only appear when the “more” text is clicked?

You need to hide it on page load and only show it using states, url parameters, or other workflow actions such as (show / animate group)

I don’t suggest using a floating group for your use case though. It would be easier if you use a groupfocus element since you don’t need to hide it. It will hide itself if you click outside of the groupfocus. Plus, you just need to use the toggle action to make it visible or to hide it.

Hope this helps

Edit: Floating groups are limited in terms of where you want to position them in your app. Groupfocus on the other hand, lets you exactly position where you want it e.g. under an element - which I believe, is what you’re aiming to do

It makes perfect sense. Yeah, I remember making a note of all of the containers, and I forgot that the group focus acts as a drop down. Thanks a lot!