List Container OnClick Event

API & Customization
1

Hi,
I currently have List view displayed as “Cards” with a button that links to the details page. Is there a way that I can make the “Card” itself the button to the details page?

Here is a screenshot of one of my “Cards”
Screenshot 2022-04-26 105934

Here is the CSS Code that I am using:
/VIEW 2234 MARKETING TASKS/
#view_2234 .kn-list-item-container {
border: solid 0.4px grey;
border-radius:1em;
padding-top:10px;
width:300px;
min-width:200px;
padding-left: 20px;
padding-right: 10px;
text-align: center;
}

/VIEW 2234 MARKETING TASKS/
#view_2234 .kn-link-page {
border: solid 0.4px grey;
padding: 5px;
border-radius:3px;
background-color: lightgrey;
display: block;
align-items: center;
color: black;
text-align: center;
}

/VIEW 2234 MARKETING TASKS/
#view_2234 .kn-link-page:hover {
border: 1px solid grey;
background: #76b9e2;
}

/ALL Container Mod/
.kn-list-item-container {
-webkit-box-shadow: -1px 1px 3px 4px rgba(163,163,163,0.33);
-moz-box-shadow: -1px 1px 3px 4px rgba(163,163,163,0.33);
box-shadow: -1px 1px 3px 4px rgba(163,163,163,0.33);
margin-top: 10px !important;
margin-left: 15px !important;
}

Thanks in advance!

1 Like
2

Nice card and good idea Brian!

3

Hi @Brian1 you’ll need to add some Javascript - we’ve done this a bit as you’ve discovered it’s natural for many users to click anywhere on the card. I’ve guessed from your CSS the view number and card link inside the item container - so there might be some testing needed from my air code to get the selector right:

$(document).on('knack-view-render.view_2234', function(event, view, data) {
    $('#view_2234 .kn-list-item-container').click(function(e) {
        window.location = $(this).find('.kn-link-page').attr('href');
    });
});

To help users have the hand cursor appear when hovering over each card:
#view_2234 .kn-list-item-container {cursor: pointer;}

Brad

1 Like
4

I will give it a shot today Brad, Thank you. I will let you know how it goes.

5

Brad, works perfect. Thank you very much!

6

Brad thanks again for the help. I do have another question. How would I Highlight a field and change it’s color based on a set condition? Say if the Estimated % Complete was not what it should be I could change the background color of the field to yellow or red.

7

Good to hear @Brian1 mark that as the solution and start a new thread for your additional question and we’ll get more eyes on it - I have a feeling there’ll be a few different ways to solve it!

1 Like
8

Thanks Brad.