I want my focus group to attach to a icon and show when it is pressed but when i got select what element for the group to attach to the icon is not there but other icons are how do i fix this???
Wrap icon in a group?
nope tried that
Is the icon in a repeating group?
no its not
Not working with a button, as shown in the Bubble video. https://youtu.be/l_SbovrRt2s?si=g8cd4z_qtvX_zt-F
I did this exactly as shown and doesn’t find it in the list of objects. The button is nested within a number of groups. If I put a button at the top, it finds it. Feels like a bug.
It works for me. You can see here I have a button in a group which is nested in 3 other groups and the button shows as an option for reference elements
@alex.esposito.1108 I’m 10 levels deep unfortunately. Try grouping it repeatedly and see if it breaks.
It works fine. I haven’t heard of nested elements impacting this.
This may seem like a dumb question, but are you sure that the button you’re targeting is on the same page that you’re adding the GF to, and not in a reusable element like a header?
It’s a one-page app so yes. Which browser and Bubble version are you using? There’s got to be something I’m doing that is causing this. I’m in Edge on version 26.
Now the element I’m attempting to attach to is in a Repeating group. However, that should work as well as shown here: Your Bubble app (bubbleapps.io)
I can see the Repeating Group but nothing within it. The RP is at level 7.
The difference between mine and the demo is that he has the group focus within the repeating group. I can’t seem to get the group focus to be within the repeating group as I can’t drag it.
You can’t add a group focus in a RG. The editor of the app you shared is a bit confusing because it does somehow show a groupfocus inside the RG. However, it’s not being used. The groupfocus you see when previewing the app is actually in a reusable element which is then placed in the RG. This is the workaround provided by Bubble:
My preference now is always just to create my own pseudo focus group, using an align to parent group and negative margins.
You can achieve a lot more creating them this way, all you lose is the “close when page clicked” function, which I don’t miss, but can be replicated with JS if really necessary.
-
Wrap whatever element you want to attach to in an align to parent group
-
Fix the parent group’s dimensions (and make sure you’re not hiding overflow via css)
-
Add in another group which becomes your dropdown or whatever, aligned to the edge you want it to hang off
-
Add negative margins to the “focus” group equal to its own length/width on the same side as its alignment.
Past that you just need to show/hide/animate it however you want. I’ve managed to make much slicker dropdown menus using this method, since it removes all restrictions affiliated with focus groups.