The forums are closed and will be removed when we launch our new site.
Looking for support? You can access the support system via your account.
- This topic has 13 replies, 2 voices, and was last updated 4 years, 1 month ago by
.
-
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;
}Hi Trevor, no also to those sites. Here are the images.
This one is my current. I am posting CSS Below. Found it here in the forum.
Below fotoshop is what i would like to achieve. original source is:
https://www.findeq.eu/stock-like-sjh-allplantFirst row 1 search bar.
2nd 3 pulldown menu
3th 3 sliders
4th some download and info.Colors also like in this screenshot. Width like in findeq as machine pictures.
CSS as i have now:
.searchandfilter[data-sf-form-id=”2918″] {
padding: 20px;
}
.searchandfilter[data-sf-form-id=”2918″] > ul {
margin: 0;
}
.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″] li[data-sf-field-input-type=”select”] label,
.searchandfilter[data-sf-form-id=”2918″] li[data-sf-field-input-type=”select”] select,
.searchandfilter[data-sf-form-id=”2918″] li[data-sf-field-input-type=”daterange”] label,
.searchandfilter[data-sf-form-id=”2918″] .select2-container {
min-width: 100%;
}Next try to show the pictures:
The forum ‘Search & Filter Pro’ is closed to new topics and replies.
