Groups Stacking on Top of Each Other

askanatty · October 2, 2021, 11:12pm

Responsivenss problem here.

I have 2 groups.

One is higher up on the page and then the other is about 10px below it.

When I’m in doing a preview, it looks like this and the groups stack on top of each other.

When I’m in editor, it looks like this and the groups and clearly not stacked on top of each other.

Does anyone have an answer as to why the groups suddenly stack on top of each other? Just FYI, each group contains a group that appears when the chevron down arrow is clicked. Each group is smaller than its contents.

Hi @J805! When researching the forum on how to fix this problem, I ran into some work you did on responsiveness. I wonder if you might be able to help me out a little bit? Or anyone who has an inkling of why this is happening? Would appreciate any light shed on this.

J805 · October 3, 2021, 1:35am

Hey @askanatty

I have worked a lot with responsiveness for sure. Hope to help you out a bit. It can be tricky.

Usually this is happening because there is another element on the screen that is overlapping.

What other groups are in that group?

Let me know. Maybe take a screenshot of it since it will be easier to help you that way. Show all hidden elements and display element borders as well. That will make it easier to see any overlap or rogue element on the screen.

Hope that makes sense.

askanatty · October 3, 2021, 1:59am

Hi Jason (Thanks for catching this!)

In each group, there is a repeating group grouped with an input box which appears and disappears as text is entered into the input box. This acts as a drop down.

Underneath that, there is a group that shows the results.

(Yes, there are other ways, fast fuzzy (has a flaw when groups are visible not visible), Bubble’s native search box (cannot search partial), other dropdowns option, but there are some issues with those options so I choose this. )

Dropdown repeating grooup

Results repeating group

(Note, the results repeating group also has the same problem of overlapping with the input.)

Suggestions welcome!

J805 · October 3, 2021, 2:34am

Hey @askanatty

Got it. Yeah. That’s why it’s doing what it’s doing.

You might want to try one of these options instead:

Use a group focus. The group focus allows for overlapping elements since it’s above the other elements like a popup.

Or.

Don’t overlap the elements, just stack them down the page and make sure collapse when hidden is checked.

Does that make sense?

askanatty · October 3, 2021, 2:48am

HI Jason:

I figured so - overlapping is not the best idea in most cases. I was trying to simulate a dropdown with results underneath it - I’d tried group focus, but it doesn’t resize.

I’d also tried the stacking, which works very well, but I wanted to dropdown to cover the results section instead of pushing it down.

I guess I’ll have to compromise. Group focus might be the way to go. (Ah well, I can skip resizing. Or unless anyone’s got another solution.)

Many thanks Jason.

Have built 3 draft apps in the time we spoke, so been keeping busy.

J805 · October 3, 2021, 3:02am

Sounds good. There might be some code you can add to get it to resize possibly. Or maybe even a plugin. Just a thought.