Skip Navigation

[Resolved] Equal Height Grid Rows

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.

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

Supporter timezone: America/Jamaica (GMT-05:00)

This topic contains 11 replies, has 2 voices.

Last updated by Alok Sharma 10 months, 3 weeks ago.

Assigned support staff: Shane.

Author
Posts
#2257183
2022-01-03_12-29-28_Themes_–_WP_Devsigner_—_Mozilla_Firefox_(Private_B.jpg
2022-01-03_12-27-36_Edit_WordPress_Archives_Block_‹_WP_Devsigner_—_Wor.jpg

Hi,

I would like to have the rows in the loop style grid to be equal height.

I referred to this solution https://toolset.com/forums/topic/equal-height-for-toolset-grid-via-block-editor/#post-1998999, but it is not working.

Please refer to the attached screenshots.

#2257687

Shane
Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

Hi Alok,

Thank you for getting in touch.
Would you mind allowing me to have admin access to the website so that I can have a more detailed look at this for you ?

Please where applicable please provide me with a link to an example page where I can see the issue.

I've enabled the private fields for your next response.

Thanks,
Shane

#2259255

Shane
Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

Hi Alok,

Thank you for getting in touch.

I gave the containers a minimum height of 400px so they should be displaying evenly now.

Please let me know if this helps.
Thanks,
Shane

#2259341

Hi Shane,

Super awesome, it is working like a charm.

Just one thing. I need to move the CSS out in the theme additional CSS so that I don't have to add it in all the archive templates. I added the following CSS, but it won't work from there:

.tb-grid-column>.wpv-block-loop-item>.tb-container {
height: calc(100% - 50px);
display: flex;
flex-direction: column;
min-height: 400px;
}

But as soon as I add it back in the archive template CSS, it starts working.

Am I missing something?

I also thought to add a CSS class to the container "tb-container-equal-height" so that the above CSS would work only for containers having this class, but I can't get to it.

#2259439

Shane
Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

Hi Alok,

I've seen where you've added the tb-container-equal-height class. The css should work regardless of where its added however can you let me know where you're proposing the add the css so that it affects all your archives ?

This way I can test and see why its not working as intended.

Thanks,
Shane

#2259859

Hi Shane,

Actually, there was an unclosed CSS bracket in the Appearance > Customize > Additional CSS which was creating a problem. Gladly, I figured it out and everything is working perfectly fine.

My issue is resolved now. Thank you!

#2259913

Hi Shane,

This is working as long as the contents are not exceeding the 400px limit.

So if I increase the min-height to 425px, a lot of blank space is left at the bottom even if the contents fit within 400px or less.

I did some research and found examples on equal height columns, but can't figure out how to implement them.

Is there any other work around?

#2260139

Shane
Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

Hi Alok,

Can you send me the link to the example for equal heights column?

Thanks,
Shane

#2260241

Hi Shane,

Here are some of them:

hidden link

hidden link

hidden link

https://stackoverflow.com/questions/2114757/css-equal-height-columns

I have added the CSS in Appearance > Customize > Additional CSS

#2260325

Shane
Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

Hi Alok,

Given that you had marked this ticket as resolved, the credentials got removed.

Can you re-add them in the private fields so that I can continue assisting.

Thanks,
Shane

#2266587

Shane
Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

Hi Alok,

Thank you for the continued patience.

Unfortunately I was not able to get the equal heights setup to work with the links you've sent. The main reason is that these items rely on a specific html structure where we are not able to replicate with a block view given that it has auto generated html blocks.

Using the minimum height css seems to be the best approach currently.

Thanks,
Shane

#2267649

My issue is resolved now. Thank you!