Skip Navigation

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

This thread is resolved. Here is a description of the problem and solution.


The customer asked if there is a way to show results/cards with unequal heights in a grid/column layout, in a consistent manner.


Suggested to use some custom CSS code to set the results/cards with equal heights and then allow vertical scrolling within.
( ref: )

Relevant Documentation:


This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

No supporters are available to work today on Toolset forum. Feel free to create tickets and we will handle it as soon as we are online. Thank you for your understanding.

Sun Mon Tue Wed Thu Fri Sat
- 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 -
- 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 -

Supporter timezone: Asia/Karachi (GMT+05:00)

This topic contains 3 replies, has 2 voices.

Last updated by simchaH 1 year, 3 months ago.

Assigned support staff: Waqar.



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,



Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

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.




Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

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 )


Thanks Waqar, that was perfect!

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

overflow-y: scroll;


overflow-y: auto;

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