Collapse repeating group when RG has fixed number of cells

[jamesbond]

Hi guys, I’ve been fiddling with the “Fixed number of cells” RG and can’t seem to figure out how to collapse it when there is an insufficient number of cells. My intention is to list only 12 items on page load and use pagination to display the next 12, however, I’ve realised that there is a MASSIVE and very much confusing gap (having an adverse effect on the UX) when the maximum number of cells are not displayed. For example, rather than there being the maximum 12 cells, when there are 8 cells shown, the full height of the repeating group still displays as if there are 12 cells. Users are often baffled when seeing this as it makes it seem as though there is no pagination, when in actuality there is - the pagination group/RG is just way below the fold because the missing cells have not collapsed.

Is there anyway to collapse this for the purpose of pagination?

[jamesbond]

Bumping this up

[ken]

Does “Full List” do it?

[jamesbond]

I’ll give this a try. Correct me if I’m wrong, but I’m pretty sure that pagination only works with and RG that has a fixed number of cells.

[ken]

Hi,

I haven’t noticed that in any of the reference, or manual descriptions, but it’s worth a try.

[boston85719]

I am very much in need of a solution for this as well. I have posted this in another thread previously and have been scouring the forum for a solution but none seems to exist.

I am also have problems when the page width shrinks the repeating group results won’t fit all of the fixed number of cells as the repeating group height is not tall enough when there are enough results that the smaller viewer width makes the R.G. have less rows than made in editor ( ie: editor is 4 rows but smaller screen width makes only 2 rows )…the total results is 12 but only 8 are displayed as the R.G. height doesn’t expand.

Fixed margins in repeating group

@duke.severn I got a new issue now as I continue to progress on this portion of the app. I have set things up so that the repeating group has no fixed width and when the page expands and shrinks the repeating group follows suit perfectly. The new issue is that I am wanting to use pagination on the page. I have the repeating group set to show the search results. When I design the page the pagination group is at a certain Y coordinate, which is set accordingly to be relative to the repeating gro…

I know I could create separate groups for all the different possible widths and row combinations but I’d rather have the responsive settings allow me to make just one page that works on all screen widths.

Another issue is that the footer of the page is not able to be responsive since the page height is not responsive.

[boston85719]

Here is an answer for anybody looking as I had to

Any way to include a "sticky footer" which sticks to the bottom of user's screen when the page height is less than user's screen height?

@sridharan.s thanks for the ideas. I actually got helped out by @duke.severn on this subject. The key was to have a group that contains a repeating group, and other elements as seen in the element tree below. [38%20PM] The “main group” ( in my example : Group Favorite Gifts ) has the following setting to make sure it can be expanded. [13%20PM] I set mine to max width 800% so that the repeating group would expand to many different columns when the page is stretched. Then the repeating group…

[rico.trevisan]

I’ve been ignoring this problem in my app for the past 3 months. Today I decided to tackle it, got lazy when I scanned the number of answers and links…

So I devised a dirty solution. I haven’t done extensive testing, but I thought to share the idea here (as a note to my future-self).

My solution was to create 2 repeating groups.
[dodges tomatoes thrown by the crowd]
Hold on, hold on! Hear me out.

1. I duplicated the original repeating group. So now I have the og-RG and the new-RG.
2. create new groups, containing each RG.
3. both group are set to NOT be visible + collapse when hidden.
4. the og-RG-group has a visibility rule that if the contents are greater than 10, it’s visible.
5. the new-RG-group has the opposite (actually, to be precise it’s equal or less than 10).
6. the new-RG is set to Layout style: Full list.

It works so far.

[rico.trevisan]

So, I’ve learned a few new tricks in the meantime. The above solution is a bad solution.
[throws tomatoes at past self]

Just use @keith’s List Shifter.

I’ve made a few videos of me untangling the mess I created and replacing with List Shifter.

Refactoring Bubble

[keith]

I’ll have to check that out! Thanks for building out some fresh content about List Shifter!

[mghatiya]

Thanks @rico.trevisan taking time to post here and also for the videos explaining how it works. It really helped.

I have been avoiding List Shifter for long for the fear of having to learn another thing, and also didn’t know it could be helpful in this context.

And thanks @keith for creating the List Shifter.

[mghatiya]

One caveat in using list shifter though which probably should have been called out here and in documentation (or maybe it is called out but I missed it) is that one needs to wait for the “initialised” state of the list shifter element to do operations on it.

I was doing a “go to page” operation on list shifter element. It was working in test setup, but not in production. In production setup, the list shifter was going to page 1 even though I wanted it to go to page n.

After breaking head for over an hour, I by luck figured out that element was not getting initialised, and that was causing this behaviour.

But now I am wondering that if the code has to wait for initialisation of this element, is this SEO friendly?