Skip Navigation

[Resolved] CSS problem about button and table

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

Problem:

Style the HTML button with CSS:

1) Need to align the buttons to the bottom of a Row.

2) Change the button and text color for the button.

3) The table is not responsive.

Solution:

It is a custom CSS codes problem, see the solution in details here:

https://toolset.com/forums/topic/css-problem-about-button-and-table/#post-1144890

Relevant Documentation:

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)

This topic contains 2 replies, has 2 voices.

Last updated by tohL 6 years ago.

Assisted by: Luo Yang.

Author
Posts
#1144864

The CSS code is work.

Could you please help on the button CSS?
1) Need to align the buttons to the bottom of a Row.
2) Change the button and text color for the button.
3) The table is not responsive. (please refer 7.jpeg)

#1144890

Hi,

Since it is a custom codes problem, I need to test and debug it in your live website, but seems you are editing that view "Search Location", so it is hard to edit the codes.

Here are what I found:
Q1) Need to align the buttons to the bottom of a Row.

I have edit the content template "Loop item in Search Location", as below:

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

Same as your previous post, we just need to wrap contents except the button into a DIV tag, and setup min-height value to that DIV tag

Q2) Change the button and text color for the button.

As you cans see in above content template, you can add a CSS class name "my-button" to that button HTML tag, then you can style it with CSS codes, like this:

button.my-button{
	background-color: blue;
	color: white;
}

See results here:
hidden link

Q3) The table is not responsive,
Yes, it is expected result, the HTML table does not work as responsive like your screenshot, the only built-in option within Views plugin is based on Bootstrap, but you have disabled it here:
Dashboard-> Toolset-> Settings
in section "Bootstrap loading", you are using option "This site is not using Bootstrap CSS".
https://toolset.com/documentation/user-guides/displaying-content-using-grids/

If I am right, your website theme "HND" is not compatible with Bootstrap, and conducts the problem in handphone:
https://toolset.com/forums/topic/dropdown-list-not-function-in-responsive-view-handphone-view/

So there are few options you can choose:
1) contact the author of theme "HND", fix the compatibility problem with bootstrap
2) Switch to other bootstrap compatible theme, there is a theme list we recommended:
https://toolset.com/documentation/recommended-themes/
3) I see you are using "Elementor" editor, you might check this with their support, check if there is any way to setup a responsive table.
hidden link
You can output view result according to their requirement, butI have searched it with google, but can not find related document on their site.

#1145557

My issue is resolved now. Thank you!