Forum Academy Marketplace Showcase Pricing Features

Fixed Cells Repeating Group Excess Height

Old Responsive Engine. Upgrading this element to the new responsive engine would be hell on earth and is pretty my last resort. @bubble

My app has a social media feed and I’m trying to implement pagination as opposed to ext. vertical scrolling which is slow to load on mobile.

I load 20 “posts” within a RG, and after the user scrolls vertically to the bottom, they can load the next page of results, which scrolls them back up to the top of the page.

Anyways, the repeating group isn’t dynamically adjusting it’s height to the content of the feed, which results in there being white space at the bottom of the repeating group.

Since the app is a social media feed, some posts have images and some only have text.

If 10 Post have images, there’s not much white space.

If only 2 posts have images, and the rest are just text based, there’s ample white space.

Images collapse height when data source = empty.

This is a single page app-shell, so the main page is ~30,000px, but constantly shrinks itself due to only displaying one page at a time. The page with the repeating group is ~20,000px

Sounds like you need to get rid of min heights and set all the groups in your feed to fit height to content. The RG too.
Then set the min height of the page to 0 as well. It will expand depending on the contents.

Old responsive engine doesn’t have min height settings.

I still haven’t been able to figure this out, so I’ll explore upgrading the page to the new response engine, but it will be very very time consuming to reconstruct the page this way so I’ve been avoiding it.

When I first started transitioning pages, what helped me a lot was to extract parts of it into reusables. Then you can transition one reusable at a time.

1 Like

Solved @rico.trevisan

I created a new reusable on the new-responsive engine, I then placed a repeating group on it with the necessary data.

I then converted the subgroups of the original repeating group into a separate reusable.

This separate reusable is still on the old-responsive engine.

I then placed the 2nd reusable w/ subgroups inside of the 1st reusable w/ new-engine repeating group.

I was familiar with using reusable elements that contained new-responsive engine code, mainly so I could steal layouts from other templates I own that use the new engine, but it didn’t cross my mind to do it specifically like this with repeating groups until you mentioned it, so as always, thanks for saving me, Rico

Also thank you to @atomicfusion for the preliminary advice

I was 60% sure that repeating group settings on the new responsive engine could solve this issue, but I wasn’t sure, and as mentioned before, I really didn’t want to recreate all these groups just to take that gamble.

The advice was correct though, and now ‘Fit to height’ & ‘min height: 0’ are part of the setup of the new repeating group and why it works now.

2 Likes