Collapsing a group

If there is a repeating group inside a parent group, the collapse when hidden property of the parent group doesn’t work.
Note: the repeating group is empty (no data) and also hidden. There are no other elements within the parent group. Still, the parent group doesn’t collapse in height

Is this a bug or am i doing something wrong ?

1 Like

figured it out. hidden elements…
how to delete this post

1 Like

I’ll keep it there, a good tips for other users :slight_smile:

4 Likes

Can you briefly explain what you mean with the hidden elements, and getting the group to collapse? An element wouldn’t let you??

I have two groups (repeating groups) that I want to collapse - this forum post is great because, I think if I put one of the groups into another group that is not repeating - I should be able to collapse it (its been stretching my page)

But one of my repeating groups is a “reusable element” - and the parent element has no option to collapse - there is only a check-box that says “enable page rendering…”

Any thoughts on this guys? I would LOVE to successfully collapse the height of these two things.

Thanks

1 Like

One thing that seems to work is to keep an element inside a group and collapse. So keep each repeating group inside a group and collapse the group when hidden.
Does that work ?

2 Likes

I will try that later today. I think it will work for one of the repeating groups.

  • I have a reusable element though - that is a RG inside a regular group/ the regular group doesn’t have the collapse option…
    And it’s tricky to trigger a workflow for a reusable element - from outside the reusable element.

Either way I will play around with regular parent groups (I always wondered why the collapse check box was on some and not on others :smile:) cheers

2 Likes

Just a small additional note here:

I was able to figure this out for both of my issues. So thanks a bunch @gaurav!

For anyone interested in regards to reusable elements: I put the reusable element inside a regular group (on the main page) - pasted a button onto the regular group (to collape its height when hidden) then brought it in front of the reusable element, sort of sandwich style.

  • The reason being; reusable elements kind of work in isolation to the rest of the apps workflows

  • What i can say for anyone using a repeating group (particular in a mobile view) - absolutely put it inside a regular group to begin with. For the longest time, my page was stretching past my default dimensions and I couldn’t figure out why there was no “collapse height” check box for repeating groups.

Suuuper happy with these results :relaxed:

I’ve got two groups both are set to collapse when hidden.

I’ve hidden them based on page width but they’re not collapsing it seems and they’re creating a void between the group and the content beneath the group.

Is there a specific setting I should be doing? Does the reusable element (row of logos) affect the collapsing ability or the ability for that Resusable element to move up under the content that collapsed?

https://testingapplication604.bubbleapps.io/version-test/collapsing_groups?debug_mode=true

@gaurav Can you explain what you did? I don’t understand when you only say “hidden elements”.
I have a parent group, 2 child elements: a text (for title) and a repeating group. What should I do to collapse the parent group?
Thanks.

@bachvi98
Put the repeating group into a group and collapse it when hidden. Then make the parent group - which contains this group (containing the repeating group) and the text element - to collapse when hidden as well.

I dont recall what the hidden elements comment was about; its’ been half a year since the comment date.

Hope this helps !

Is this what you mean?

  • Group A (collapse when hidden)
    – Group B (text element - collapse when hidden)
    — Group C (repeating group)

C is in B, which is in A?

Did this work?

scottb50 and others,

Did this work? Another question, if the collapse when hidden and the animation style is picked, is it suppose to provide you the collapse or expand capability? Or do we have to add buttons to actually tell what to do? Anyone who could share some screen shots will help greatly.

Never mind, got it to work by trial and error. We need to define action by having some sort of button or icon.

I also tried placing the icon outside the group that works fine too.

Another quick question, when collapsed, need to transition to a different icon like - (minus for collapse) and + (plus for expand). If any tips how best to accomplish this?

I think bubble should add a feature on collapse when hidden is checked it automatically adds some sort of button from a pre-defined library. Slight level of automation can reduce effort on development side.

Started loving this.

The best way to + and - is to use the condition on one icon and a state. When the group is expanded, set a yes/no state to something like “expanded”. Conditionally, when expanded, the + icon should become a - icon. To make your app faster, you could use styled +/- text,