Anyone have a way for groups within groups to "collapse height when hidden" correct?

I continue to spend lots of time with workarounds for this and am wondering if anyone has a more straightforward solution.

Here’s an example of a workaround: Changing height for sign-up / login pop up

Hey Scott :slight_smile: Not sure if this is what you were referring to, but for the sign up/log in reusable elements (or any reusable elements where groups are directly on top of each other of varying heights), I usually set the popup background to be transparent, and then have the Login and Signup groups styled like a popup (white background with an outset drop shadow).

I’m almost sure the group collapse is prevented when groups are on top of each other. Alternatively, you can vertically stack each group (like the screenshot below), set each group to collapse in height when hidden, and they will collapse in height as expected.

3 Likes

Incredibly smart solution @fayewatson. You never cease to impress!

Thanks for sharing.

1 Like

Thanks so much Scott! :slight_smile: My pleasure!

Does anyone else think this is something that we should have control over at the Group level?

My single-page apps are all super tall even when collapsing all Groups is enabled (even reusable Groups), supposedly because this is prevented when they’re on top of each other as you say. It’s not realistic to neatly stack dozens of Groups on top of one another especially when their sizes are changing depending on content within. In my case some pages are over 7000 pixels tall. When visitors on mobile scroll down fast, they go thousands of pixels past the end of the Group that’s currently visible based on URL data and end up taking a few seconds to scroll back up. I’ve added a back to top button for now but I imagine the best case scenario would be having collapsing Groups working correctly.

Anyways, thank you for helping me better understand collapsing groups @fayewatson.

2 Likes

No problem at all, @philip :slight_smile:

From my experience with collapsing groups, the collapse has been prevented either because of overlapping groups, or elements (other groups, icons, texts, hidden elements) on the page that are outside and next to groups I’m trying to collapse.

For example, if I have this setup of an icon next to a group I want to collapse in height:

The blue group will not collapse when hidden because the icon is next to it:

If the icon is moved lower in the editor, so that it is beneath the blue group, the blue group height will collapse as expected:
Before Collapse:

After Collapse:

So as you said, this can be really tricky to keep track of/manage when pages are super tall, have a ton of elements (hidden + visible), with groups next to groups of varying heights, or non-grouped elements hiding beneath groups on the page. I also usually find the littlest things like a hidden icon, accidental text element or some tiny element on the page beneath groups, which is preventing the collapse - so I check the elements panel very frequently to make sure I haven’t accidentally created those.

Not sure if this is the case for your app as the setup may be different, but if you have a different setup and would like me to take a look, or have a few screenshots, I can try to figure out why the collapse isn’t occurring. :slight_smile:

2 Likes

Thank you @fayewatson for this explanation and break down with visuals. I’m going to have to spend some time digging through my 7000px tall problem app as it could be any number of things you pointed out. I’m pretty good about keeping a hierarchy of Groups all at the same x y coordinates but since I do have a floating header, floating footer, floating sidebar AND floating master content group, it may be something else entirely.

1 Like

I had some trouble with this and discovered that Alerts affect this as well.

2 Likes

Thanks for mentioning this. An alert was preventing a group I have from collapsing and spent too much time trying to figure out why until I read this.

1 Like