List View styling

API & Customization Ask Developers
1

Hi guys,

I need to style some fields in List View, but I don’t succeed to target them through the Code Inspection.

a) How to change a field text size or color? (I have done it in Table View)

b) How to change the background color of a whole row, not only the background behind the text?

If somebody already answered to that in some posts please send me the link.

tks

2

Hi Michael,

List Views aren’t built with table elements. The elements in play for a given field are mainly the field label and the field body. For example:

/* Style field label or field body: view_xxx is the list view key, field_xxx is the specific field key */
#view_xxx .field_xxx .kn-detail-label {
    font-size: 1.5em;
}

#view_xxx .field_xxx .kn-detail-body {
    font-size: 1.5em;
}

For your second question, since list views do not use a table element structure, you’re going to need to target the above elements separately. If you really want to change the background-color of both field label and field body so that it appears to be a row, you can get rid of any padding, margin, or border, and the two elements should bleed into one another.

#view_xxx .field_xxx .kn-detail-label {
    background-color: green !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
}

#view_xxx .field_xxx .kn-detail-body {
    background-color: green !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
}

Note that the !important tags are only used in this situation if you already have styling for that specific view or have already targeted these elements with a higher specificity. I recommend removing them and seeing if you get your desired behavior first, then adding them in if you’re not seeing the change.

Hope that helps!
JD

1 Like
3

WOW @JD_Zappfy , that was fast and well explained. It worked at the first try.
Thank you very much!

I am adding a question about List View:

c) How to change the size of a whole row?

I found out: line-height.

tks again! that was one of the fastest resolution. great!

1 Like
4

An other one, which is not really specific to List View:

d) How to remove the underline from text.

I tried text-decoration: none!important; but it does not work.

5

@MichaelG if you’re trying to set the width or height of the fields, you should be able to target those properties directly (width, height) but you may have to look at the divs above them in the DOM because they could be controlling the width and height as well. line-height controls the distance between actual lines of text (consider it the closest property to controlling double/multiple spacing in a word processor).

For the text-decoration, you may need to target the span inside (e.g. .kn-detail-body span). Sometimes Knack will have multiple span elements inside of a field label or field body (e.g. .kn-detail-body span span).

1 Like
6

Ok, I got lucky with the line-height the first time. Now I know the diference with those other parameters.

Adding span one or two time doesn’t do it. Anyway, it is an unimportant detail.

thanks @JD_Zappfy !

1 Like
7

Got this ugly at the end!

#view_2199 .field_730 a:link { text-decoration: none }

And there are some more:
a:visited { text-decoration: none; }
a:hover { text-decoration: none; }
a:active { text-decoration: none; }

I found that here How to Remove the Underline from Links in CSS

8

And… I just tried it… just this code remove the underline EVERYWHERE.

a:link { text-decoration: none; }

sleek