[Resolved] Toolset Blocks | Loop Style: Grid | Equal Heights?

[Author]

Posts

[CSS Web]

Tell us what you are trying to do?

Aloha 🙂 I just want equal height cells, desktop and tablet, for Loop Style: Grid

Little surprised this isnʻt being offered as an option in the View Loop settings ... it seems a fairly fundamental user need?

I say the above with much respect for Toolset and the Team 🙂 LOVE this product!

Is there any documentation that you are following?

Iʻve failed to find a solution in Toolset Professional Support that I could employ.

Is there a similar example that we can see?

Please see screenshot

What is the link to your site?

Password protected during dev.

[Waqar]

Hi,

Thank you for your kind words and glad that our product is proving useful.

Your observation is correct and currently, there is no built-in feature to make the grid loop items show with equal heights.

I've shared this feedback to the concerned team and for now, a workaround can be to include the following custom CSS code in the view block's "Custom CSS" field:
( screenshot: hidden link )

.tb-grid .tb-grid-column .wpv-block-loop-item {
    height: 100%;
}

I hope this helps and please let me know if you need any further assistance around this.

regards,
Waqar

[CSS Web]

Aloha Waqar,

Is there a way to share a password protected link with you?

Your solution is SO close - but oddly not perfect for some reason.

Love it if you can take a quick look.

Thanks 🙂

Bill

[Waqar]

Hi Bill,

Thanks for writing back.

I'd be happy to take a look and you're welcome to share temporary admin login details and link to a page where this view can be seen.

Note: Your next reply will be private and as a precaution please make a complete backup copy, before sharing the access details.

regards,
Waqar

[Waqar]

Hi Bill,

Thank you for sharing the link.

The issue seems to the difference in how different browsers calculate the percentage heights.
( background reading: https://stackoverflow.com/a/35537510 )

To make this work, you can slightly update the CSS code to:

.tb-grid .tb-grid-column,
.tb-grid .tb-grid-column .wpv-block-loop-item {
	height: 100%;
}

regards,
Waqar

[CSS Web]

My issue is resolved now. Thank you!