[Resolved] Equal height for Toolset Grid via Block Editor

[Author]

Posts

[nickK-7]

Tell us what you are trying to do?

I searched for hours to get all grid items the same height. Now when there is one line text everything is fine, but when there are two lines text, the Grid is not equal as I see on my border I added. Also the button I added in the grid should always be on the same height. How to achieve this?

Is there any documentation that you are following?

I read your whole forum, but also Google without result.

Is there a similar example that we can see?

Not live yet, can send a screenshot in private if needed, but I think it's quite straightforward.

[Minesh]

Hello. Thank you for contacting the Toolset support.

I will require to know the exact structure of elements you added to your grid.

One of the similar issue I was able to fix by adding the custom CSS and here is that related solution:

Can you please try to add the following CSS code to your view's custom CSS section:

.tb-grid-column>.wpv-block-loop-item {
    height: 100%;
}
 
.tb-grid-column>.wpv-block-loop-item>.tb-container{
    height: calc(100% - 50px); 
/* this is 100% minus top and bottom padding */
}

Do you see it working?

[nickK-7]

Hi Minesh,

Thanks for your reply. The blocks are now all equal heights, but the buttons are not on the same position. Due to differences in the content of each block, some buttons are higher or lower placed than others. It would be fantastic if we could align the buttons on one same height. How can I achieve this?

Best regards, Nick

[Minesh]

Hi Nick,

I need to know how exactly you added your button and how it looks like currently. If you could upload your site to some test server and send me link where I can see the issue would help me to review your current setup and then I will be able to guide you in the right direction.

[nickK-7]

Hi Minesh,

I understand, however uploading to a test server is difficult at this moment.

Can I upload a screenshot in private?

[Minesh]

I need frontend screenshot as well as your block structure screenshot as well as the how button rendered in page behind (page source) screenshot so I will be able to know what classes are added.

[nickK-7]

Hello Minesh,

Thanks for opening private fields. Hereby the infomation requested.

Hope you can assist me on this.

Best regards,
Nick

[Minesh]

I do not see any information with previous reply. I just see the text.

Can you please upload screenshots to any file sharing service and and send me the links to review.

[nickK-7]

Hello Minesh,

Can you enable private fields please? I will send the link via the fields.

[Minesh]

I have set the next reply to private which means only you and I have access to it.

[Minesh]

Can you please try to add the following CSS code:

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

.tb-button.aligncenter.button-bottom {
margin-top: auto;
}

Please add class button-bottom to your button block from right sidebar.

[nickK-7]

Hello Minesh,

Almost perfect. Is it possible to align the buttons to the left? Then it's ok.

[Minesh]

Well - you should check the button block and with button block on right sidebar you will see the "Button Alignment" option. I hope that helps and you will require to adjust the CSS accordingly if required.

[nickK-7]

Hello Minesh,

Thanks for your help. I didn't notice that is was centered in the settings bar. I adjusted the setting and the css class accordingly and it's perfect now.

My issue is now resolved! Thanks!

Best regards,
Nick

[Minesh]

Glad to help. You are welcome to mark this ticket resolved.