How do i make a floating group hide when click away

How do i make a floating group hide when clicked away from like a popup or focus group does. I’m using a Floating group for my side bar menu. I was using a focus group but a focus group needs to sit under an element whereas by using a floating group i cant tell it to attach itself to the top left corner of the page. Problem is… when i click away from it, it doesn’t close the popup.

1 Like

For example, you want to show when the text

You can say when not focued or group hide this element isn’t visible.

Maybe share some screenshots.

Thanks, Ali
Connect with me on Linkedin: https://www.linkedin.com/in/a-imran/
Or book a call to say hi: Calendly - Ali Imran

Thank you but this is not helpful. Your english is confusing. i don’t know what you are saying sorry.

Here is the situation. i have a navigation icon that toggles the visibility of the floating group menu. but i also want to hide the floating group menu when i click the page (i.e., click away from the floating group).
Screen Shot 2022-08-23 at 11.55.17 pm

If your page has a main container ‘Group’ containing all the others (with no max height or width), then it’s a simple as hiding the floating group when that Group is clicked…

If it doesn’t, then that’s probably the simplest solution without using some custom JS.

1 Like

So i have to put all my pages content into a single group and run the workflow on that group?

Maybe it would be easier if i just switched back to using a group focus instead of a floating group and just make it attache to 0px x 0px dummy element in top left corner… if that’s possible?

So i have to put all my pages content into a single group and run the workflow on that group?

That’s what I’d do if you don’t want to use a group focus…

Maybe it would be easier if i just switched back to using a group focus instead of a floating group and just make it attache to 0px x 0px dummy element in top left corner… if that’s possible?

… but yeah, that will work too.

Maybe the group focus option is better because if i did the workflow option then users would see their cursor as a hand everywhere they go; would they not?

1 Like

Update: i just realised that i can’t do a group focus on a reusable element.

I forgot to mention i’m doing this all in a reusable element so i can use this menu across many pages of my web app.

Maybe the group focus option is better because if i did the workflow option then users would see their cursor as a hand everywhere they go; would they not?

That is true, yes (unless you use some custom CSS to change it)

I would reccomend turning the entire group into a focus group and tuning it’s properties. It will auto hide when clicked away from.

How do i do this?

You could create a new focus group and wrap everything inside of it that way it does not affect any properties on the main group. You should see focus group under containers.

This still doesn’t solve the issue of the fact that focus group can’t stick to the top left of a page, only to the bottom of an element. and i can’t set an element to be 0px x 0px

As a way around this, you could possibly create an element that is not visible when the page load and use it as a reference. Use a negative value for the y to the height of the element.

This is not working because i cannot seem to place a reusable element inside of a group focus

update: that’s because my reusable element was a floating group still.

Ok i did it and it doesn’t work. First of all clicking away from the group focus did not even hide it. second, group focus’ don’t float in one spot (which is what i need) like the floating group does. So now i am back where i started: trying to make it work with the floating group setup.

Ok i had another crack at the group focus approach and i got it working. the problem is that when the page larger than 1000 i want the group focus to be visible so i made this workflow (see image below).

But he problem is if a popup appears and a user clicks off the popup, it also hides the group focus. why is it doing this? how do i prevent it from doing that?

The other problem i now have that i didn’t have before when i was using a floating group is that when i go to click things on the page on desktop view it hide the menu (which i only want it to do when the screen is mobile size) does this mean i need to have a floating group version and a group focus version of the same menu on the page?

It is all done!! i got it i just made the menu reusable element a ‘Group’ and then on the page i put it inside a ‘Floating group’ and again (so a duplicate) inside a ‘Group focus’ (the group focus was attached to a reference group which i made a floating group (to make the group focus act like a floating group (i felt so smart doing that)) that i gave a negative top margin to hide it above the page. I then put conditionals on the reusable element that was placed in the group focus to be visible when the page width was <800 and not when => 800. whereas for the floating group i gave it conditionals that made it visible when page was >1000 and not when <800.

And finally, two workflows running on the navigation icon click:
the first causes the Group Focus to be visible only when current page width is <800; whereas the other workflow shows the Floating Group only when current page width => 800.

Works seamlessly, you can’t even tell there is two different elements that exchange as you widen the browser, each having different functionality depending if you are on mobile size or desktop. if i’m at desktop size now, the floating group version is visible and clicking anywhere on the page doesn’t hide the menu (which is what i wanted). and when you are on mobile size screen, the group focus is the one visible instead, which is what i wanted so that when you click away from it, it will hide the menu (which is a trait only the group focus does and not the floating group) because you are on mobile size screen.

Thanks for everyone’s help. We did it!

2 Likes

Sounds awesome!