[Resolved] Equal Height Grid Rows

[Author]

Posts

[Alok Sharma]

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.

[Shane]

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

[Shane]

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

[Alok Sharma]

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.

[Shane]

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

[Alok Sharma]

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!

[Alok Sharma]

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?

[Shane]

Hi Alok,

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

Thanks,
Shane

[Alok Sharma]

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

[Shane]

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

[Shane]

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

[Alok Sharma]

My issue is resolved now. Thank you!