[Resolved] vertical align bottom in inner container doesn`t work

[Author]

Posts

[heinrichT]

I am trying to: vertical bottom align the content in the container (in loop output)

Link to a page where the issue can be seen: hidden link

I expected to see: the pictures bottom aligned

Instead, I got: what you seee

[Minesh]

Hello. Thank you for contacting the Toolset support.

Can you please share admin access details so I can review how exactly you setup your blocks as well as can you please clarify what exactly the content you would like to align bottom. Maybe you can share screenshot of the entity which you want to align bottom.

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

[Minesh]

I checked the access details and try to login to admin but the shipped access details are not working at this end. Can you please send me working admin access details.

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

[Minesh]

Thank you. The shipped admin access details are working at this end.

So, I would like to ask you, on the following page:
- hidden link

Your aim is to display all images aliened in one row, currently that is not the cases because if you check the title of the post, one post has title in one line and another post has title with 3 lines.

[heinrichT]

hi minesh,
yes i know that the headlines are different. the problem is, that the vertical alignment in inner container is not working properly. the setting is to bottom, that should set the images to bottom = aligned.

[Minesh]

Can you please check now: hidden link

I've set the Min-Height to 575 px with your container block.

Please check the following screenshot: hidden link

I can see all images are bottom aliened.

[heinrichT]

hi minesh, i tried this already but this is not the answer to my question. why is the bottom align in inner container not working as it should?
and by the way the min-heigth settings in mobile doesn`t work too. tried to setup "0" doesn´t work

[Minesh]

hi minesh, i tried this already but this is not the answer to my question. why is the bottom align in inner container not working as it should?
==>
What you mean by this? The thing is that your content you have within the container is different. One post have one word title and another post have 10 words title that is why we have to add the minimum height so it should respect all big/small content.

and by the way the min-heigth settings in mobile doesn`t work too. tried to setup "0" doesn´t work
==>
Do you mean you do not want to display that section on mobile?

[heinrichT]

hello minesh,
when i have a grid with columns, the container should have the size of the largest grid? for this are the inner container settings: top, center, bottom. in this way grids are working usually?? am i wrong?

and for mobile, i want to see the section on mobile, but not with the size 575. here is only 1 column, so the post should as high as it is normally - without min-height

[Minesh]

I've added the following CSS code to your archive view's "Custom JS and CSS" section. Please check the following screenshot:
- hidden link

.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 */
}

Can you please confirm it works as expected now.

[Minesh]

Can you please confirm that the solution I shared help you to resolve your issue and you see expected result with both desktop and mobile.

[heinrichT]

dear minesh,
the solution with your custom css is working fine. tks for it. nevertheless for other projects too i have to understand why the vertical alignment of inner container is not working (the same for mobile min height setting). bug oder feature? even if you avoid this question, i'm afraid i will insist on an explanation.

"when i have a grid with columns, the container should have the size of the largest grid? for this are the inner container settings: top, center, bottom. in this way grids are working usually when they are not masonry?? am i wrong?"

tks in advance for clarification

[Minesh]

the solution with your custom css is working fine. tks for it.
==>
Great. Glad to know that workaround I shared helps to fix the issue.

nevertheless for other projects too i have to understand why the vertical alignment of inner container is not working (the same for mobile min height setting). bug oder feature? even if you avoid this question, i'm afraid i will insist on an explanation.
"when i have a grid with columns, the container should have the size of the largest grid? for this are the inner container settings: top, center, bottom. in this way grids are working usually when they are not masonry?? am i wrong?"
==>
The thing is that there are few grid problems that is known to us and we will try to improve it as much as we can and your case is one of them. We wanted to implement Grid globally and want to see it should work in all aspect with all settings etc..etc.. but there are some edge case where something will not work. But as acknowledged we will improve in in near future.

if you find something not working, you are welcome to report it and we will be happy to offer you workaround or native solution within our plugin.

[heinrichT]

My issue is resolved now. Thank you!