How to make clickable bootstap toolset div clickable

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

Problem:

I would prefer to have the all div as a "button" and open the popup.

Solution:

You can use CSS codes to make HTML a tag as 100% width and height, for example:

https://toolset.com/forums/topic/how-to-make-clickable-bootstap-toolset-div-clickable/#post-1275551

Relevant Documentation:

This support ticket is created 5 years, 8 months 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: Content Templates, Views, Views plugin

This topic contains 2 replies, has 2 voices.

Last updated by philippeS-4 5 years, 8 months ago.

Assisted by: Luo Yang.

Author

Posts

June 24, 2019 at 8:58 am #1275527

philippeS-4

Hi Luo,

To follow-up on last week support ticket regarding the sorting of taxonomy I have now used custom fields and manage the get the behaviour I wanted. I am at 98% there! I am struggling to get the col-sm-3 as a clickable div in order to open a popup.

hidden link

At the moment the popup is a link to the company's logo and it is working fine. I have put a hover effect on each div and
since some logo's are fairly small or more rectangular you really have to click on the logo itself to open the popup. I would prefer to have the all div as a "button" and open the popup. I have tried putting putting some of the modal code like data-target in the loop itself but without success.

I would appreciate your help with this, if you could put me in the direction. I basically have no Java experience so not sure this is what I need? I can provide you admin access to the site if needed.
Thanks for you help.

View: All Exhibitors
Page: Sponsors

June 24, 2019 at 9:29 am #1275551

Luo Yang

Hello,

Thanks for the details, you can use CSS codes to make HTML a tag as 100% width and height.

I have done below modifications in your website:
Edit the post view "All exhibitors", in section "Loop Editor", click "CSS Editor", add below CSS codes:

a.main-logo {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

Please test again, check if it is what you want.

June 24, 2019 at 9:35 am #1275557

philippeS-4

My issue is resolved now. Thank you!