Floating group in floating group


I have a floating group (FG1)that I am using as a filters menu. I have everything set up correctly in the floating group currently.

What I am attempting to do is put a floating group (FG2) into the floating group (FG1). I want the floating group (FG2) to hold buttons for clearing the selected filters as well as saving selected filters and closing the floating group (FG1) to view search results.

Any idea how to get this to work. Seems a bit strange that I can’t put a floating group into a another floating group. I tried placing a group into the floating group (FG1) and replace the group with a floating group (FG2) but the replace feature doesn’t give me any options when the popup appears, so seems like for some reason in bubble this is impossible.

I also tried to put a floating group onto the page that would appear when the filters floating group appears but the FG on page is hidden behind the filters floating group.

I really don’t want to put buttons at the top and bottom of the filters floating group, I’d rather be a bit sleeker than that and provide a better user experience.

You can’t put a floating group inside anything else, it has to be a child of the page directly.

But if you don’t put that floating group in a group, then you can’t apply responsive settings of centre alignment to it. So, no win?

There is a plugin from BDK that allows you to make any element a floating element. It is useful, although not the best.

I use it to turn a group into a floating group for alignment purposes, but on browser width resizing the plugin acts up and doesn’t perform well. It only really works when the page is loaded and the size is constant, otherwise strange behavior ensues.


For now I managed to get it work by putting a group inside a floating group. Gave all the responsive settings to the group along with a width constraint, and let the floating group take full width.

One issue with that is the floating group will cover other elements on the page. So if you have a button and the floating group is covering it, the button is inaccessible.

Be sure to try to get all elements to be ‘on top’ of the floating group to avoid that.

Thanks for the tip. In this case I don’t have those issues, but yes, it would be handy when I face that.

Why can’t you put a floating group into another group? Eg, why is this a problem/why does this result in errors?

I’m a first timer, and have developed my app with various floating groups within other types of groups.

I have errors as a result, but my site acts as I would like it - eg, the floating groups float within other groups without issue. I have designed around these floating groups so that overlap is not an issue.

I can deploy to live and ignore the errors, but would like to clear up if possible.

Are my options:

  • redesign - eg, use ‘align to parent’ groups and create elements within that ‘float’ relative to that?
  • Use the app with the errors

I’m just wondering why a FG within another group is a problem - what am I missing?