[Resolved] Add a Read/Load More Button in nested Loop View

[Author]

Posts

[simchaH]

Hi,

I have a loop, and inside the loop there is a nested loop. So the main "Parent Loop" is basically a container, and the inner "Child Loop" are a bunch of mini-posts/cards. There are cases where the nested inner loop has a dozen cards displaying one after another, and that makes it look very long.

I was wondering if there is a way to make it that after the 2nd or 3rd Card/Nested loop item gets displayed in the main loop, to have a "Load More" button that will display the remaining items/cards in the nested loop?

Aside from it being a lot of scrolling, it also makes the whole web-page look inconsistent because each main loop view holds a different amount of nested loop items which increases/decreases the height of the whole loop view- so loop item #1 might be only 200px height, but loop item #2 will be 400px height. Is there any way to create a clean look even without the load more option?

Thank you,
Sim

[Waqar]

Hi Sim,

Thank you for contacting us and I'd be happy to assist.

To share some suggestions, I'll need to see exactly how this page with the nested views is set up.

Can you please share temporary admin login details, along with the page where these views can be seen?

Note: Your next reply will be private and it is recommended to make a complete backup copy, before sharing the access details.

regards,
Waqar

[Waqar]

Thank you for sharing these details.

To make the result blocks/card appear in a consistent layout, you can use some custom CSS code to set a fixed height to the card container and allow vertical scrolling within each card.

.row.ds-top > .col-sm-4 > .tb-grid {
	height: 350px;
	overflow-y: scroll;
}

This way, all blocks/cards will have the same height and for the long cards, the content within will be scrollable.
( screenshot: hidden link )

[simchaH]

Thanks Waqar, that was perfect!

Just in case someone else reading this thread needs this, I changed

overflow-y: scroll;

to

overflow-y: auto;

in order to make the scrollbar only show up on the looped items that need scrolling.

Thanks!