How To Align Buttons To The Bottom of a Row

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

Problem:

Use CSS codes to setup buttons in grid cells in a horizontal line.

Solution:

It can be fixed with CSS codes, see details here:

https://toolset.com/forums/topic/how-to-align-buttons-to-the-bottom-of-a-row/#post-1142131

Relevant Documentation:

https://www.w3schools.com/cssref/pr_dim_min-height.asp

This support ticket is created 6 years ago. There's a good chance that you are reading advice that it now obsolete.

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.

Sun	Mon	Tue	Wed	Thu	Fri	Sat
-	9:00 – 13:00	9:00 – 13:00	9:00 – 13:00	9:00 – 13:00	9:00 – 13:00	-
-	14:00 – 18:00	14:00 – 18:00	14:00 – 18:00	14:00 – 18:00	14:00 – 18:00	-

Supporter timezone: Asia/Hong_Kong (GMT+08:00)

Tagged: Views, Views plugin

This topic contains 4 replies, has 2 voices.

Last updated by tohL 6 years ago.

Assisted by: Luo Yang.

Author

Posts

November 7, 2018 at 10:00 am #1142034

tohL

How To Align Buttons To The Bottom of a Row?

Could you please show me the css.

Thank you.

November 7, 2018 at 10:29 am #1142097

Luo Yang

Hi,

I suggest you wrap those button into a HTML div tag with style "text-align: center;", for example:

<div style="text-align: center;">
	[wpv-filter-submit output="bootstrap"][wpv-filter-reset output="bootstrap"]
</div>

More help:
hidden link

November 7, 2018 at 10:46 am #1142112

tohL

This is the Code I'm using at the "Templates for this View"

[types field='store-name'][/types]
<br>
[types field="address"][/types]
<br>
[types field="contact"][/types]
<br>
<div>
<button type="button" class="button1">GET DIRECTION</button>
</div>

I want to align the buttons to the bottom of a row.

Thank you.

November 7, 2018 at 11:00 am #1142131

Luo Yang

Thanks for the details, I suggest you change the codes as below:

<div style="min-height:180px">
[types field='store-name'][/types]
<br>
[types field="address"][/types]
<br>
[types field="contact"][/types]
</div>
<div>
<button type="button" class="button1"><a href=[types field='get-direction' output='raw'][/types]>GET DIRECTION</a></button>
</div>

And test again, more help:
hidden link

November 8, 2018 at 12:54 am #1142566

tohL

Thank you Luo Yang. My issue is resolved now. Thank you!