Checkbox layout: Side by side, not long lists?

Anonymous

#46220

One of the reasons I was quite happy with the free version was how tight you could pack the info in the widget. See first image. Now I got pro, and seem to be stuck with the long list, second image. Is there any way to get the same layout in the pro version?

Anonymous

#46221

Oh, just to be clear: I did not change anything to the CSS. I currently have both the free and pro versions still installed; these different layouts are simply the result of switching between those two versions

Anonymous

#46223

Hmm, nevermind. Hidden away in the ‘let’s put five pages of code in one line, it’s so much shorter that way’ search-filter.min.css

Trevor

#46237

Indeed, Custom CSS is the answer. Don’t edit the plugin files, as when you update, it will break.

Anonymous

#46241

Actually, not there just yet.
Have a few tweaks that I just can’t seem to figure out.
In below image its A: reduce this distance. B: increase this distance. C: make checkboxes stick on one line with their text.

In very short; I really just want it to look like the free version.

Currently working with
.searchandfilter p{margin-top:1em;display:block}
.searchandfilter ul{display:block;margin-top:0;margin-bottom:0}
.searchandfilter ul li{list-style:none;display:inline;padding-left:0px;padding:0px 0;margin:0}
.searchandfilter ul li li{padding:0px 0}
.searchandfilter ul li ul li ul{margin-left:0px}

Anonymous

#46242

Pic doenst seem to load

Anonymous

#46243

Actually just now found which margins to use to change A and B.
Have no idea how keep checkbox and label on same line, would be appreciated if that can be explained

Anonymous

#46244

Ah, nevermind. its inline block. Should anyone ever have the same question, stick this in your custom CSS:

.searchandfilter li[data-sf-field-input-type=checkbox] label {padding-right:10px;padding-left:0px}
.searchandfilter ul li{list-style:none;display:inline-block;padding-left:0px;padding:0px 0;margin:0}
.searchandfilter ul li li{padding:0px 0}

Am a bit surprised about these differences. Why keep a different layout as standard in free and pro? For me, I got the pro because I liked the free, and ended up having to stick my nose in the code. The point of getting pro quite often is to just pay instead of go through the misery of finding the right lines of code.
Happy with the plugin, but this was surprising

Trevor

#46283

The free and pro plugins, are, in fact, VERY different.

But, to your point. By leaving the styling more basic, it allows users to do their own thing. What we plan to do is enhance the plugin so that you can add styling (such as CSS classes, margins etc) in the form design. This would then mean that you could add CSS classes already defined in your theme and thus easily personalize the look.

Anonymous

#46286

Hi,
I noticed that are very different, yes.
I would say there is room for improvement here. I found it quite difficult to determine which of the CSS files to look in. The single-line layout of the search-filter.min.css makes it terribly hard to see what’s in there, or to identify the block of classes one wants to play around with.
I tried opening the thing in ‘brackets’, but it still was only viewable as one big block.

[Author]

Posts