Responsive nested repeating groups: Comments within Posts

GB44 · 2020-11-18T04:40:41.353Z

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?

Eg:
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
etc

Screen Shot 2020-11-17 at 8.37.57 PM1456×1302 173 KB

boston85719 · 2020-11-18T05:14:09.774Z

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.

GB44 · 2020-11-18T16:55:25.933Z

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.

boston85719 · 2020-11-18T17:01:29.557Z

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

GB44 · 2020-11-18T20:40:50.579Z

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

GB44 · 2020-11-20T01:28:34.283Z

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

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

See screenshots to illustrate

Screen Shot 2020-11-19 at 5.26.30 PM2880×1800 412 KB

Screen Shot 2020-11-19 at 5.26.38 PM2880×1800 360 KB

Screen Shot 2020-11-19 at 5.26.42 PM2880×1800 468 KB

Screen Shot 2020-11-19 at 5.26.48 PM2880×1800 399 KB

Screen Shot 2020-11-19 at 5.26.52 PM2880×1800 632 KB

boston85719 · 2020-11-20T06:38:20.057Z

Screen Shot 2020-11-20 at 1.37.55 PM673×623 15.8 KB

Bubble

Bubble Editor - Blurimagesdirectly

Build stuff without code and launch a startup without a tech-cofounder! Bubble is a visual programing language. Instead of typing code, use a visual editor to build applications.

GB44 · 2020-11-20T15:32:21.936Z

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.

boston85719 · 2020-11-20T15:44:06.046Z

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

GB44 · 2020-11-20T16:07:38.774Z

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?

boston85719 · 2020-11-20T16:17:39.376Z

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.

GB44 · 2020-11-20T16:21:43.703Z

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

gnelson · 2023-08-26T12:22:41.210Z

Hello @boston85719

How do we do this in the responsive engine? Your very good example isn’t built on a responsive page (Thank you BTW). I don’t experience the same behavior when using the responsive engine. My nested RG shows only one row with a vertical scroll bar.

Thanks for your help!
George

boston85719 · 2023-08-26T16:20:29.928Z

gnelson:

My nested RG shows only one row with a vertical scroll bar.

Set up your first RG and then add the second RG into that first RG to nest a repeating group.

The nested RG should not be inside of any container within the first RG, so that the nested RG is not restricted in height in any way. Then in the nested RG, setup the layout so it doesn’t have any fixed height, and make it so it doesn’t have a fixed number of rows.

gnelson · 2023-08-26T16:28:53.073Z

Thanks for your response @boston85719

I think that’s how I have it set up…

image1086×610 51.4 KB

image866×499 34.6 KB

But this is what I end up with…

image360×528 26.2 KB

boston85719 · 2023-08-27T05:22:51.581Z

I think you should submit a bug report if you are positive that your nested repeating group has more than one entry.