Styling Lists in Next-Gen Knack

Ask the Community Get Answers
1

Hello Community -

I recently started using the next-gen knack builder, however, I cannot figure out how to turn list views into the nice expandable cards I was able to create in the classic knack - any suggestions - old css code below:

#view_4674 .kn-list-item-container{

width: 350px;

height: 450px;

background: #fff;

border-radius: 1px;

border: 1px solid rgb(182, 183, 186);

overflow-y: scroll;

overflow-x: hidden;

color: var(–color-text);

box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px,

          rgba(0, 0, 0, 0.23) 0px 6px 6px;

cursor: crosshair;

transition: all .2s ease-in-out;

}

2

Hi @Adam1 Next-Gen uses semantic class names like .kn-list-view-column for individual list items or .kn-card for card-style layouts (Classic uses .kn-list-item-container).

Give this a try -

.kn-page #view_4674 .kn-list-view-column {

width: 350px;

height: 450px;

background: #fff;

border-radius: 1px;

border: 1px solid rgb(182, 183, 186);

overflow-y: scroll;

overflow-x: hidden;

color: var(–color-text);

box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px,

rgba(0, 0, 0, 0.23) 0px 6px 6px;

cursor: crosshair;

transition: all .2s ease-in-out;

}

3

Can you point us newbies to some detailed documentation on this new Next Gen stuff. There are plenty of examples of Classic in the forums but I have a hard time finding Next Gen info. I’m building out 2 apps - one in Classic and one in Next Gen.

4

Sure, here is the app documentation: Introduction to Knack

And here is the Developer documentation: (CSS): Next-Gen Apps: Quick Start + CSS Reference

JS: Getting Started with JavaScript and here: User Tokens

1 Like
5

Thanks! I know I’ve seen some of those and I probably have a few in a list of “must reads” somewhere, but I have so many lists that I had to make a list of them! Change is hard for this old guy.

1 Like
6

The new Knack builder is still missing some of the styling flexibility that Classic had, so recreating those expandable card-style list views isn’t as straightforward. You can still achieve it, but it now requires custom code rather than just CSS.

One approach is to bypass the limitations of Knack “Views” entirely by using the Knack API Objects (the raw data tables) to build your own layout. That lets you design whatever card or accordion UI you like, because you’re controlling the HTML/CSS/JS directly rather than modifying Knack’s generated views.

The traditional downside is that using Objects exposes your API keys in the browser. We solved this by putting the custom code on a small web application hosted on Vercel, where the Knack API keys live safely as environment variables and never leave the server. The gallery on the Kalmfulness site is built this way — Knack handles moderation, and the actual UI is a fully custom layout driven by secure API calls. It also means you’re not tied to Knack’s hosting costs for custom code.

If it’s useful, I’m happy to share the pattern or walk you through setting up a secure Knack-proxy so you can build any card/accordion layout you want, even with the new builder.