How to properly set dynamic height of repeating group elements

[krejko]

Hello,

I am trying to display a list of tasks with an ‘expand’ button to display each list item’s subtasks. Asana has a similar feature which you can see in the screen shot below.

To display the information for each row of my repeating group I have created two reusable elements.

1. A List Item Row Element: contains a ‘completion’ checkmark, and a ‘task’ name label
2. A Expandable Row Element: consists of two parts:
   2a) The List Item Row Element described as a part of bullet #1 plus an ‘expand’ button to the side of this element.
   2b) A hidden group that the displays its contents when the ‘expand’ button is pressed. This group has the “Collapse this element’s height when hidden” box ticked and contains another repeating group where the main tasks’s subtasks will be shown.

The best I can tell, both of these reusable elements seem to be working well whenever they are not inside of a repeating group. However, whenever I add the Expandable Row Element to the cell of a repeating group, things stop behaving as one might expect.

To start, I created my repeating group, added the Expandable Row Element to the cell, and hooked up my datasources. The repeating group was set to a height of 500px because I want to display 10x rows and each List Item Row Element (only element visible in Expandable Row Element) is 50px.

Based on the editor preview, one might expect this to show the List Item Row Element for each cell. However, when the ‘Preview’ in the corner is pressed, every cell is 0px high with the exception of the very last row. Besides this one row only the gray cell separators are visible.
I’ve tried to inspect one of these rows using the debugger tools, but I couldn’t find any useful information for debugging this issue.

For my second attempt I tried cutting the number of rows in half to see if maybe bubble wasn’t detecting the List Item Row Element for some reason. This seems to be a step in the right direction, but what exactly happening here is quite puzzling. Given we now have 5 rows on a 500px repeating group, one might expect each row to be 100px. However, surprisingly, each row is now 50px.

This is a good start, but when I press the ‘expand’ button, the cell does expand to 100px, but now any contents of subtask repeating group that are taller than 100px now show behind the next row.

This seems to indicate that if the cell is tall enough to fit all the content one might want to display, it will collapse to the appropriate height when the rest of the ‘expandable’ content is hidden.

For my third attempt, I tried to test this theory by making each cell larger than it needed to be. I increased the height of repeating group to 2000 for the 5 rows making each row 400px tall assuming that due to the collapsed content that it will initially display each cell at 50px like it did in my second attempt with a maximum height 400px when expanded. However, again, this yielded another set of confusing and inconsistent results. This time each cell started out at 400px instead of in their collapsed state seen in the previous two attempts.

Would anyone be able to explain the logic as to why the layout system is behaving in this peculiar way? More importantly, would anyone have any suggestions for how to get my layout to function like the Asana example in the first image attached?

Thanks in advance for the help!

[krejko]

Hello,

I was hoping to bump this in hopes of finding a solution. This is pretty perplexing issue and one that could prevent me using bubble to finish building out this app.

Thanks in advance,
krejko

[tomerlan5]

zeroqode dynamic height plugin. @levon

[krejko]

@tomerlan5

zeroqode dynamic height plugin

This is the plugin you were mentioned? Dynamic Height and Width Plugin | Bubble

The descriptions only mentions setting the height based on percentage width/height of the viewport, not based on content size. This is also a paid plugin which is fine if it does what I need it to, but becomes difficult justify when there isn’t a concrete indication that it will resolve the issue at hand.

Thanks again for your response. Hopefully, I’ve missed something simple.

[adamhholmes]

This should be simple enough to do (we use expandable RGs all the time in our apps and it’s easy to set up, even with multiple nested RGs with variable heights).

There could be a number of things going wrong here, but to me it looks like the main thing you’re doing wrong is using the wrong cell height.

Your cell height needs to be tall enough to contain ALL the elements inside it (hidden or visible).

Currently your cell height is set to 50 which is only the height of 1 of the groups within it.

So when you’re trying to show the second group within the cell, the cell is not tall enough to show it (which is why only the bottom row of the RG is visible when you previewed it).

To get dynamic height working correctly, both groups inside your RG cell need to be stacked one above the other (with no overlapping or space).

So if your first reusable element has a height of 50, and your second reusable element has a height of 400, your RG cell needs to have a height of at least 450 (more if you want to have some space between each cell).

Reusable element 1 should be placed at the top of the cell and reusable element 2 directly underneath it (with no overlap).

Have whichever of them will be hidden set to collapse height when hidden and use whatever custom states you have set up to control when each one is visible of not.

If that’s done correctly then what you’re trying to do should work no problem - i.e. initially only one group is visible and the RG cell height fits perfectly to that. When the other group becomes visible the cell expands to fit whatever is inside the group dynamically, and collapses again when it’s hidden.

Personally, I usually only work on RGs with a single cell (including on nested RGs) as it makes it much easier to design in the editor), so I’d recommend doing that - it makes resizing cells and elements inside them easier and more manageable - especially when working with expandable nested RGs like you are here.

[cmarchan]

As usual @adamhholmes … excellent guidance!

[mszaxaroff]

Hi! I did as you wrote, I managed to hide the groups. Thank you for the advice! But I have another problem. Long loading of each cell. How do you solve this? I use this in a messenger and I need a quick scrolling of messages.

[founders.agora]

What height setting would you use on the repeating group? I have a very similar set up where a button inside a RG expands the cell vertically to show a group with more information. While only the hidden group shows that is related to the cell I clicked in, every cell in the repeating group increases in height, even if the hidden group for that cell isn’t showing. I currently have the repeating group set to fit height to content but that doesn’t seem to be working. Ultimately I am just trying to grow the height of the single cell I am interested in.