Conditional height and number of raws for a repeating group

Hello everyone,

I am experimenting with Bubble and I am a beginner.
What I would like to accomplish is to change the height (in pixel) and number of raws of a repeating group upon the number of elements to be displayed.
The repeating group will show, in each rows, an answer by the users of the website.
At the beginning, the repeating group is empty.
When I will get the very first answer, it should be 100 px high and contain 1 raw, when the second answer will be there, it will be 200 px high and will show 2 rows, with 3, 300 px high and 3 rows, with 4 answers it will be at its final dimension, i.e. 400 px high and 4 raws, with 5 or more answers it will stay 400 px high but the scrollbar should appear and let the visitor to scroll through the raws.
I thought this could be done by conditional, but I have noticed only few proprierties can be changed there.
Any advice if it is possible to do? And in the affirmative, how?
Thank you very much!

Make sure you’re on the new responsive engine first, then just set # of columns to 1, then uncheck the # of rows, and instead put 100px minimum per row. Then go to the Layout tab and check “Fit to content” for the height. Then put the repeating group inside a new group, and for the new group in the Layout tab check “Allow scrolling when content overflows” and set the max height to 400px

Thank you Tyler!
I have followed the passages you suggested (I upgraded to the new responsive engine and set cols and rows as suggested) but I can’t find both the “Fix to content” option in the layout tab of the repeating group and the “Allow scrolling when content overflows” in the group layout tab as well…
check my screenshot

Oops sorry, at the top of the Layout tab change the Container layout to Column.

Hi Tyler, sorry to answer so late. Thank you very much, it worked well. I also checked the “collapse when hidden” option in order to make it work. Cheers, Federico

1 Like

Hello Federico i am having excctly same isue. How did you solve it ? any video reference?

Hi findmyganja, I have solved by:

  • stacking the repeating group inside a group set to column as container layout
  • before the repeating group I have stacked 3 hidden groups: the first is the space I want to leave before the repeating group when this has just one filled cell; the second when the rep group has 2 filled cells; the third is when the rep group has 3 filled cells
  • for each of the previous group I have set a condition to show it when the repeating group has 1, 2 or three filled cells
  • every “space” group is set to be collapsed when hidden
  • inside the cell of the repeating group I have put a group that must be collapsed when hidden; if I am not wrong there is the same option in the repeating group itself (but I am not sure)
  • I pass the content of the cell to the group inside it and it should work (at least for me it works fine)
    Hope this helps.
    Cheers
1 Like

This topic was automatically closed after 70 days. New replies are no longer allowed.