Are you able to send me a live link/URL to your search page so I can take a look?
Normally, something like this will center the form:
.searchandfilter[data-sf-form-id="1428"] > ul {
display: table;
margin: 0 auto;
}
Something like this I think:
.searchandfilter[data-sf-form-id="1133"] ul {
padding-left: 0;
display: table;
margin: 0 auto;
}
.searchandfilter[data-sf-form-id="1133"] li {
padding: 0;
margin-right: 10px;
}
.searchandfilter[data-sf-form-id="1133"] li:last-child {
margin-right: 0px;
}
.searchandfilter[data-sf-form-id="1133"] li.sf-field-taxonomy-length select.sf-input-select {
min-width: 120px;
}
.searchandfilter[data-sf-form-id="1133"] li.sf-field-taxonomy-equipment select.sf-input-select {
min-width: 150px;
}
.searchandfilter[data-sf-form-id="1133"] li.sf-field-taxonomy-focus select.sf-input-select {
min-width: 155px;
}
.searchandfilter[data-sf-form-id="1133"] li.sf-field-taxonomy-level select.sf-input-select {
min-width: 130px;
}
.searchandfilter[data-sf-form-id="1133"] li.sf-field-taxonomy-class_type select.sf-input-select {
min-width: 150px;
}
I am hoping select2 will then copy the widths over.
Hi, you also need to change the script to Select2. We will be moving to that as standard in our next major release, as Chosen is now abandoned. It is found here:
https://www.screencast.com/t/swKsAD6kB
Some CSS to start you off:
.searchandfilter[data-sf-form-id="1133"] .sf-field-submit input {
font-size: 14px;
border-radius: 5px;
padding: 3px 7px;
border: 1px #a4a4a4 solid;
}
.searchandfilter[data-sf-form-id="1133"] .sf-field-submit:before {
content: "";
display: block;
height: 32px;
width: 25px;
}
Maybe this:
.searchandfilter[data-sf-form-id="22914"] > ul > li {
display: inline-block;
vertical-align: top;
padding-right: 20px;
}
.searchandfilter[data-sf-form-id="22914"] .sf-field-reset {
display: block;
}
This custom CSS should do it:
.searchandfilter[data-sf-form-id="8213"] .sf-field-search label {
width: 100%;
padding-right: 5px;
}
I had to add 5px right padding because you had added this CSS already:
.searchandfilter ul li {
background-color: #efefef;
padding: 20px 15px 20px 20px;
}
Where the right padding was only 15px, whereas the left padding is 20px, so it looked odd otherwise.
This reply has been marked as private.
Does this CSS work for you?
.searchandfilter[data-sf-form-id="20636"] .sf-field-search input.sf-input-text[type="text"] {
border-radius: 20px;
border: 2px dotted #aaa;
}
.searchandfilter[data-sf-form-id="20636"] ul {
padding-left: 0;
}
.searchandfilter[data-sf-form-id="20636"] ul {
display: table;
margin: 0 auto;
}
Hi,
the serach&filter function is great while the styling of the filters lacks usability & valueable options!
I have multiple filters horizontal filter set up (1) in one search form, acf group fields in place and no nested taxonomies (2) and try to place them via (3) and use the searchform via shortcode inside elemtor pro.
Given I check “Hide empty items?” in searchfilter Admin settings, then in the front-end after each filter change all filters “jump” around (accordingly to the fact, that option are lower) => this makes them uncontrolable with regards to styling.
=> unhide empty items would fix the jumping but will be an ux mess (& not the intention)
Question:
– Is there a way to have the items “hide empty items” checked (not shown in the filter option) but also have the length of the filter field fixed?
Feedback appreciated
Thanks in advance
Onur
btw:
Style of Combobox is nice – but as “date & price range&input fields” don’t have this option, their style won’t go together with the “combobox” – style of txonomy filters – is there a way to style the input fields accordingly?
btw2:
v3 will have fixes for some filter frontend styling lacks?
——-
(1)
.searchandfilter > ul > li {
display: inline-block;
vertical-align: top;
padding: 0 20px;
}
————
(2) https://support.searchandfilter.com/forums/topic/multiple-categories-combination/#post-55166 – did all of that
————
(3)
.searchandfilter[data-sf-form-id=”1428″] .select2-container {
margin: 5px;
}
from: https://support.searchandfilter.com/forums/search/filter+style/
This reply has been marked as private.
A number of issues there. Many of the elements of a form are styled by the browser and the operating system and are not affected by CSS.
As browsers go through regular updates, they change their styling of these things to suit latest ‘fashions’. I noticed recently that Chrome made such a change.
You have Elementor, but not Elementor Pro? I understand one is paid, so not everyone will use it.
If you are making custom CSS, you need to get the specificity correct, otherwise it will not override existing CSS. This means using the browser web developer inspector to see what current selectors in the CSS set a particular attribute, and using that with added specificity, usually like:
.searchandfilter[data-sf-form-id="1428"] .select2-container {
margin: 5px;
}
So, I would need to see what you are trying to change (a live link/URL), and with what CSS.
