Forum Academy Marketplace Showcase Pricing Features

Responsive nested repeating groups: Comments within Posts

See my screenshot below.

Each post can have one or more comments.

I have my RG for post comments currently hidden. How can I also shrink the RG for my posts when the comment RG is collapsed so my posts are close together vertically?

Also, how can I make the comments keep growing down the page vertically as more comments are added?

Post 1

  • 3 comments (takes up say 120px vertically)
    Post 2
  • 1 comments (takes up say 40px vertically)
    Post 3
  • 0 comments (takes up no vertical space)
    Post 4

Put the repeating group that is for comments into a group. Then set the group to collapse height when hidden, make sure it is not visible on page load, and then set conditionals to make it visible based on the number of comments for that post.

Thanks. I actually got that part. It’s how to embed that collapsing RG for comments inside a larger RG for posts and not have all the white space you see in my screenshot.

make the embedded rg the height of a single comment (40px) set it to full list with 1 row and 1 column, then make sure all things are lined up

Thanks I’ll experiment with that. Appreciate you taking the time.

I’m still struggling. How do I make the parent RG (for Posts):

  1. Short enough that it doesn’t look weird with no comments
  2. Stretch vertically as I add comments

See screenshots to illustrate

Yes, that’s what I have in mind. I can make the Comments RG appear or disappear an stretch down vertically. What I cannot figure it is how to make each cell of the Post RG expand down vertically to accommodate eg 2+ comments.

I’d love to solve, but for now I’m using a popup. Provides instant response (vs a separate Post Detail page) and is an ok user experience.

you can look at the editor of the example I built and set your app up using the same principles.

1 Like

My bad. I didn’t realize that was a solution - the title threw me off. Thanks for doing this! This is exactly what I had in mind. I tweaked my question title earlier so hopefully others will find this too. I can’t believe I’m the only one that wants to do this.

Side note - Is this inefficient? Will Bubble do a sub-query for each post to get the comments? If yes, I will hide the comments behind an “12 comments” style link. And maybe copy the latest comment to the post (selective denormalization) for display in the Post RG to help add visual interest without slowing the app down. Does that make sense and is it the right approach?

My example is a very basic example aimed at getting you the functionality of removing the white space.

It is definitely not set up as a complete solution, so yes, it is inefficient. If you want to set a maximum number of comments to view, in the comments repeating group in the datasource, set the dynamic expression to use the :items until operator, and set some number (if you want to show 12 set it to 12)…then, use the same principle to hide another group that contains a ‘view all’ button which will only be visible if the total number of comments is greater than 12…lots of different things you can do from there to show all comments but depends on your user experience and UI you want.

1 Like

You’ve been very helpful. This gives me everything I need. Much appreciated.

1 Like