Dynamically set the height of two repeating group sets

[dannyliu]

Hello Bubblers!
I have a page with two sets of repeating groups. The first set is one RG of posts (left), while the second set is a group of RGs of recommendations (right). I need to set the heights of both sets to be the same.

Examples where the left set > right set: Uniportal | Barnard College , Uniportal | UC Berkeley , Uniportal | Northwestern University , Uniportal | UC Los Angeles (UCLA)

Examples where the left set < right set: Uniportal | University of Pennsylvania , Uniportal | New York University

The only idea I can think of so far is to create option sets that maps the elements of the left-side repeating group to a list of numbers on the right side repeating groups. It’s an incredibly brute-force solution, and I’d need to revamp the whole option set if I wanted to add a new repeating group, or if data items increase (which is quite often).

Any thoughts? Also interested in any potential code/plugin solutions.

going to tag my favorite plugin authors/ experts @julienallard1 @fayewatson @keith @boston85719

[boston85719]

If you are working in the old responsive engine you can watch my tutorial on how to optimize the design of the RG which touches on setting a maximum height.

Optimize RG Design | NoCode Trainer

If you are using the new responsive system, it should not require any custom CSS.

It is mostly about not allowing the heights to differ, not about ensuring the number of entries are the same.

[julienallard1]

If I understand your intentions right, you want to set the number of Popular posts and New posts dynamically so both column height match?

If so, you could take the height value of the left column, subtract the height of the right topmost group, subtract the space between the right RGs, divide the result by the height of each post (including the space in between) and again divide the result by 2 to get the amount of cells for both Popular posts and New posts.
The equation would look like:
((left_height - right_topmost_grp - spaces_btwn_RGs) ÷ post_cell_height) ÷ 2)

To get the height of the left RG, you could use the Synced Height element from the Spacer plugin and build the above math expression with the Expression element from the Toolbox plugin. The expression would look like this:

Of course, the 400, 275, 100 values are approximate…

So in the end, that Expression element’s value would give you the number of posts to display in each RGs.

[dannyliu]

Thanks @julienallard1 – exactly what I was looking for!

I didn’t know you could take the Spacer’s synced height great feature

[julienallard1]

Glad you found what you needed.
Great design by the way, I like it!