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
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):
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.
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.
Youâve been very helpful. This gives me everything I need. Much appreciated.
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
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.
Thanks for your response @boston85719
I think thatâs how I have it set upâŚ
But this is what I end up withâŚ
I think you should submit a bug report if you are positive that your nested repeating group has more than one entry.
