I have a repeated group in a column. The column is set to a fixed height. The item within the group is set to fit to content. The items in my group are not a specific number. There may be four, there may be eight, and they are not all the same size. I want the items in the group to be spaced out to take up the entire column with even space between.
I can’t use the stretch rows to fill vertical space since the rows may be of different sizes and this will create uneven space between them.
I want to utilize the layout space between feature, but it is not working - the items are still scrunched together. Here are screenshots. Does anyone have any advice?
If want the repeating group occuping the max space of the column, uncheck the fit height to content box and set the minimum height to 100%. You can use separators with color in 0% to create gap between the cells. Try and respond if I can help about this issue.
Hi,
Thank you so much for your response. The repeating group is set to a fixed height that I want it to occupy. The items within it are set to fit to height. Where are you suggesting adding the separators? I’ve tried that on the repeating group, and it does nothing. I know I can set separators to a specific height to create space, but I don’t know how many items will be in the groove. I want the items to space themselves out in the groove according to how many items there are. Less space for more items, more space for more items.
The “space between” layout option on a repeating group doesn’t work the same way as it does on a regular group — it’s a known limitation.
One workaround: set the RG to a fixed height with a set number of rows, and uncheck “fit height to content” on the RG itself. Then set each row/cell to stretch to fill the available vertical space. Even if the content inside each cell is different sizes, the cells themselves will be equal height and distribute evenly.
If the cells really can’t be equal height, the honest answer is that Bubble’s RG doesn’t natively support true “space between” with variable row heights. You’d need a workaround like calculating padding dynamically using custom states — something like: (total height - sum of all item heights) / (item count - 1) and applying that as a gap. That gets complicated fast though.
