HowTo use repeating groups to display master/detail info

I have clients that service units at apartments. I need to display the master/detail or parent/child relationship between the apartment property and the units at that apartment. This is a zero to many relationship. Stupid easy with SQL and react but I’m out of ideas.

I tried using an RG inside an RG. I put a the detail RG inside a collapsing group. I get two results, huge visual gaps between the groups and truncating the group when there isn’t data.

Is there any way to make the Repeating Group variable in height? Any suggestions on a different UX to display the master/detail paradigm? I would hate to go back to the ancient split screen method of master on top the top half of the page and detail rows on the bottom half making the user have to scroll twice.


Maybe setting the Repeating Group “number of rows” to 1 helps you out?

Another possible solution:
Go to App Settings > General > Expose ID Attribute. Then give your RG an ID in the property editor and manipulate it’s behaviour with CSS.

@codecompany Thanks for the response. I already have the parent RG set to 1x1 . The child RG is also set to 1x1. Both are set to full list. The child RG is in a group with a conditional to hide if the unit count is < 1. the group is also set to collapse when not visible.

When there are units to display, only the header and the first row displays because the rest are cut off below the bottom of the parent RG. When there aren’t any units to display, the child group is hidden leaving a huge gap between the parent row and the next parent row where the child RG would have been displayed.

If I make the parent RG larger to show more units, the gap between the parents becomes larger. If I make the parent RG smaller, the units do not display.

I’m not sure how CSS fixes this issue since CSS is static and the row heights are dynamic. I almost need a javascript function that runs after the child RG is rendered that tells me the height of the child RG so I can set the height of the parent RG. Perhaps I can change the display to flex containers.

I’m still new at this but I am finding that ironically, the hard stuff is easy to do in Bubble. The easy stuff is hard to do in Bubble. I think it has a lot to do with using absolute positioning and elements with defined x, y, height and width. Why does my RG need a height and width? If I need to constrain it, I can put it in a group.

Yes, I was thinking about a Javascript function to manipulate this.

Maybe the easiest thing to do is to create your own plugin. In that plugin you create an “Element Action” which takes a list of master-rows and a list of detail-rows as arguments. Then you do a for-loop and nest the current row inside of div element. And if there is no data, you skip that adding the div to the dom.

I took that from the top of my head, but i’m pretty sure you can make this work.

Still new at this only started using it 3 weeks ago. Not ready for a plugin yet. I got it using css flex display . The element composition looks like this:

[RG id=parent-rg]
    [Group id=child-rg-group]
         [RG id=child-rg] [/RG]

The CSS in an HTML element:

#parent-rg {
display: flex;
flex-direction: column;
#child-rg {

#child-rg-group {

Collapsed view

Expanded view