Using reusable elements with a repeating group

[jose1]

How do you deal with the height of a reusable element, that has hidden groups, inside a repeating group?

I have a reusable element with multiple hidden groups inside of it. This is located in a repeating group. Ideally, when the hidden groups are made visible, the repeating group would stretch so that is all fits within that row. It doesn’t do that at the moment. Instead, it overlaps with the next row, making it hard to read. I don’t want to make the row taller because then there will be a lot of empty space. What am I doing wrong?

← This is how it looks like with all hidden.

← This is how it looks like currently when I make the hidden groups visible within the reusable element.

← This is how I want it to look like, except without the white space when the hidden groups go back to being hidden.

[cmarchan]

@jose1

Use groups as placeholders that collapse that white space up when hidden

Place a group where you need to eliminate that dead space

Make it as high as the dead space

Set it to be not visible

Set it to be transparent (if at all is made visible later or even prior to being collapsed

Set it to collapse when hidden

If you need animation upon a click of another button/icon on the page then set the checkbox to animate the collapsing action

[jose1]

Use groups as placeholders that collapse that white space up when hidden

How do I get the placeholders to collapse when an action is taken on the reusable element. Let’s say I click the down arrow in the example above to make the hidden group visible. How can I then get the placeholder to not collapse so that the hidden group in the reusable element has enough space.

Working With Groups in Bubble.io (How to Collapse and Expand)