CSS to display search filter pro in the sidebar on two colums

Anonymous

#270188

Hello Trevor,

I’m trying to display the widget of search and filter pro in two columns using
check-boxes in the sidebar in the homepage

I tried several times using css lines but it does not work and I can’t understand why. If you can have a look thank you very much. The website is https://liberiefedeli.it

Thank you
Tommaso

.searchandfilter > ul > li {
display: inline-block;
vertical-align: top;
padding: 0 0px;
font-size: 16px;
column-width: 275px;
column-count: 2;
column-gap: 0px;
column-rule: px solid
}

Trevor

#270203

The sidebar in that page is not wide enough for two columns? Do you have a mockup image of what it needs to look like? If so, can you share a link to that image with me?

Anonymous

#270213

This reply has been marked as private.

Trevor

#270219

I am thinking something like this:

.searchandfilter > ul > li[data-sf-field-input-type=checkbox] > ul {
    font-size: 12px;
    column-width: 90px;
    column-count: 2;
    column-gap: 5px;
}
.searchandfilter > ul > li[data-sf-field-input-type=checkbox] > ul > li > label {
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
    padding-left: 8px;
    padding-bottom: 5px;
}
.searchandfilter > ul > li[data-sf-field-input-type=checkbox] > ul > li {
    display: flex;
    margin-bottom: 0px;
    padding: 0;
}
.searchandfilter > ul > li[data-sf-field-input-type=checkbox] > ul > li > input {
    margin-top: 3px;
}

Trevor

#270221

But the bottom <li> of the first column may need some custom CSS (padding-bottom) to push the input of the first item of the next column down a bit.

CSS Columns are quite flaky.

[Author]

Posts