Horizontal Rule between records in List view

Ask the Community
1

I want to provide a visual break between records in a list view. I’ve tried using CSS but I’m not having any luck. Here is the code that I’m using:

#kn-scene_76 #view_135 .kn-list-item {
border-bottom: 1px solid #ccc; /* Light gray line as separator */
padding-bottom: 15px;
margin-bottom: 15px;
}

I don’t know much about CSS, so I maybe completely wrong in my approach. Can anyone help?

2

try this :slight_smile:
#view_135 .kn-list-item {
padding: 15px;
margin-bottom: 15px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
border-radius: 4px;
background-color: #fff;
}

use only #view _xxx to style views.

3

Hi @Keith2 - welcome back to the forum :smiling_face_with_sunglasses:

You could also use the below which will give you shadow box outlines so they look like cards:

/* List Cards - Styles the list items in a specific Knack view */
#view_xxx .kn-list-item-container { 
    border: solid 1px #2480CE; /* Adds a solid 1px blue border (#2480CE) around each list item */
    
    /* Adds a subtle shadow effect to give a raised appearance */
    -webkit-box-shadow: -1px 2px 5px 5px rgba(163,163,163,0.33); /* For WebKit browsers (Safari, Chrome) */
    -moz-box-shadow: -1px 2px 5px 5px rgba(163,163,163,0.33); /* For Mozilla browsers (Firefox) */
    box-shadow: -1px 2px 5px 5px rgba(163,163,163,0.33); /* Standard CSS property */

    margin-top: 20px; /* Adds 20px space above each list item to separate them */
    
    border-radius: 1em; /* Rounds the corners of the list item (1em = relative to font size) */
    
    padding-bottom: 30px; /* Adds 30px of space at the bottom inside the list item */
}
1 Like