AnonymousInactive
Hello,
I am looking for a way to get a top filterbox with sliders and pulldown menu`s like see attached image.
Spent days reading here and tried many things but can not get it to work as it should.
Any advise and help would be great.
My site, Findeq
I like to have something like on this site:
SJH allplant stock
Regards,
Roy
CSS Used till now :
.searchandfilter > ul > li {
display: inline-block;
vertical-align: top;
padding: 0 20px;
}
.searchandfilter[data-sf-form-id=”2918″] select.sf-input-range-select {
border: 1px solid #aaa;
padding: 2px 0;
border-radius: 4px;
}
.searchandfilter[data-sf-form-id=”2918″] > ul > li:first-child {
margin-left: 0;
padding-top: 0;
}
.searchandfilter[data-sf-form-id=”2918″] li.sf-field-search h4 {
font-size: 14px;
font-weight: 700;
letter-spacing: 1.5px;
padding-top: 0;
}
.searchandfilter[data-sf-form-id=”2918″] h4 {
font-size: 10px;
font-weight:400;
color: #02213d;
}
.searchandfilter[data-sf-form-id=”2918″] select,
.searchandfilter[data-sf-form-id=”2918″] .select2-container .select2-results__option,
.searchandfilter[data-sf-form-id=”2918″] .select2-container–default .select2-selection–single .select2-selection__rendered {
color: green;
font-size: 10px;
}
.searchandfilter[data-sf-form-id=”2918″] select.sf-input-select {
min-width: auto;
}.searchandfilter[data-sf-form-id=”2918″] li.sf-field-search input,
.searchandfilter[data-sf-form-id=”2918″] li.sf-field-search label,
.searchandfilter[data-sf-form-id=”2918″] .select2-container {
max-width: 100%;
}
.searchandfilter[data-sf-form-id=”2918″] > ul {
margin: 20px;
border: 1px solid #02213d;
padding: 75px;
background: #f3f3f3;
}
.searchandfilter[data-sf-form-id=”2918″] .meta-slider {
max-width: calc(100% – 10px);
}
.searchandfilter[data-sf-form-id=”2918″] li .sf-meta-range.sf-meta-range-slider label {
width: calc(50% – 9px);
}
.searchandfilter[data-sf-form-id=”2918″] li .sf-meta-range.sf-meta-range-slider input {
width: 100%;
max-width: 100%;
font-size: 10px;
color: #000;
border-color: #02213d;
}
.searchandfilter[data-sf-form-id=”2918″] .select2-container .select2-selection,
.select2-container–open .select2-dropdown–above {
border-color: #02013d;
}
.searchandfilter[data-sf-form-id=”2918″] .select2-container, .select2-container–open {
font-size: 10px;
color: #000;
}
.select2-container–open .select2-search–dropdown .select2-search__field {
border-color: #02213d;
}
The code needed to make it 100% wide is a modification of what you already have, this bit:
.searchandfilter[data-sf-form-id=”2703″] li.sf-field-search input,
.searchandfilter[data-sf-form-id=”2703″] li.sf-field-search label,
.searchandfilter[data-sf-form-id=”2703″] .select2-container {
min-width: 100%;
}
Needs to be:
.searchandfilter[data-sf-form-id="2703"] li.sf-field-search input,
.searchandfilter[data-sf-form-id="2703"] li.sf-field-search label,
.searchandfilter[data-sf-form-id="2703"] li[data-sf-field-input-type="select"] .select2-container,
.searchandfilter[data-sf-form-id="2703"] li[data-sf-field-input-type="select"] label {
min-width: 100% !important;
width: 100% !important;
}
You have set the font in some places in your code to black, e.g.:
.searchandfilter[data-sf-form-id=”2703″] .select2-container, .select2-container–open {
font-size: 14px;
color: #000;
}
It is here that the font and font color may need to be set.
To remove the search box on the fields, change them back to normal dropdown selects, and see this post (some of the suggestions I think you have done already):
https://support.searchandfilter.com/forums/topic/css-dropdown-option-active-hover/#post-249903
As to the font color, there should be some CSS snippets in this forum search that will help you:
https://support.searchandfilter.com/forums/search/searchandfilter+data-sf-form-id+color+select2/
I am not sure what you mean by “I would also like the arrow like I have right now instead of the ‘plus’ and ‘minus’ signs.” You already have dropdown arrows?
This Custom CSS should improve the layout:
.searchandfilter[data-sf-form-id="421"] ul {
padding-left: 0;
}
.searchandfilter[data-sf-form-id="421"] .sf-range-max,
.searchandfilter[data-sf-form-id="421"] .sf-range-min {
max-width: 110px;
}
Try adding this additional CSS:
.searchandfilter[data-sf-form-id="6646"] select.sf-input-select {
min-width: auto;
}
.searchandfilter[data-sf-form-id="6646"] li.sf-field-search input,
.searchandfilter[data-sf-form-id="6646"] li.sf-field-search label,
.searchandfilter[data-sf-form-id="6646"] .select2-container {
max-width: 100%;
}
That CSS looks wrong. The first bit of code you appear to need is this:
.searchandfilter[data-sf-form-id="6646"] ul {
padding-left: 0;
}
The CSS you gave me should surely be max-width, not min-width, if it is for mobile only?
And it is missing a pair of curly braces:
@media (min-width: 600px) {
.searchandfilter[data-sf-form-id="6646"] {
min-width: 50px;
}
}
Can you show me one or more annotated screenshot(s) of the design change(s) you want? If you can do that, you would need to upload the screenshot image(s) to a file sharing site (like the WordPress Cloudup site) and share the link with me?
I think this custom CSS makes it look better?
.searchandfilter[data-sf-form-id="5450"] {
padding: 20px;
}
.searchandfilter[data-sf-form-id="5450"] > ul {
margin: 0;
}
.searchandfilter[data-sf-form-id="5450"] li.sf-field-search input,
.searchandfilter[data-sf-form-id="5450"] li.sf-field-search label,
.searchandfilter[data-sf-form-id="5450"] li[data-sf-field-input-type="select"] label,
.searchandfilter[data-sf-form-id="5450"] li[data-sf-field-input-type="select"] select,
.searchandfilter[data-sf-form-id="5450"] li[data-sf-field-input-type="daterange"] label,
.searchandfilter[data-sf-form-id="5450"] .select2-container {
min-width: 100%;
}
To make the form Horizontal, see here:
https://searchandfilter.com/documentation/getting-started/display-search-form/#making-your-search-form-horizontal
There are many other customising snippets in the forums:
https://support.searchandfilter.com/forums/search/searchandfilter+data-sf-form-id/
That code you tried will likely not work. Are you able to send me a live link/URL to your search page so I can take a look?
Is it OK to close this thread for now? If you do this forum search, you will find tons of snippets:
https://support.searchandfilter.com/forums/search/searchandfilter+data-sf-form-id/
