More list columns

Ask the Community Get Answers
1

I would like to show more than 3 columns in my list view. Does anyone have the code for expanding the number of columns?

2

Brad, you're genius thank you!

3

Hi Tony, I believe this will work - you might need to add the !Important rule though.

The container of the list has the class .kn-list-content and the display is set to flex - so any child can then be set to a determined width and they'll fit the flex parent and in this case horizontally.

Inspecting the default width of children (class is .kn-list-item-container) the width is 33.33% - so three to a row.

To make it four:

.kn-list-item-container {width:25%}

1 Like
4

Hi Brad, thank you for the trick. I have been struggling to have two columns showing up in a mobile devices, I even tried @madia queries but couldn’t succeed, any help will be appreciated.

5

Hey Brad thanks for this but, I must not be doing something correctly. I have two lists side-by-side and each list is one column wide and I want to have 4 fields in a row within the list column. However, when I apply the css it makes the whole list be 25%.
Got any clue what I am doing wrong?
Thank you!

6

Here is the way I have it in my CSS:

#view_1787 {

.kn-list-item-container {width:25%} !important;

}