Skip Navigation

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

This thread is resolved. Here is a description of the problem and solution.

Problem: vertical align bottom in inner container doesn`t work

Solution: You need to add custom CSS code to vertical align bottom content within container.

You can find the proposed solution in this case with the following reply: => https://toolset.com/forums/topic/vertical-align-bottom-in-inner-container-doesnt-work/#post-1953771

Relevant Documentation:

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.

Our next available supporter will start replying to tickets in about 2.49 hours from now. Thank you for your understanding.

This topic contains 13 replies, has 2 voices.

Last updated by heinrichT 8 months ago.

Assigned support staff: Minesh.

Author
Posts
#1938485
ts 1.png

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

#1939179

Minesh
Supporter

Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

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.

#1953579

Minesh
Supporter

Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

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.

#1953649

Minesh
Supporter

Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

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.

#1953665

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.

#1953677

Minesh
Supporter

Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

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.

#1953683

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

#1953687

Minesh
Supporter

Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

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?

#1953691

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

#1953771

Minesh
Supporter

Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

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.

#1956205

Minesh
Supporter

Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

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.

#1956421

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

#1958023

Minesh
Supporter

Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

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.

#1958047

My issue is resolved now. Thank you!