This custom CSS should get you started for desktop:
@media (min-width: 768px) {
.searchandfilter[data-sf-form-id="4680"] > ul {
display: flex;
width: 100%;
align-items: center;
justify-content: center;
padding-top: 20px
}
.searchandfilter[data-sf-form-id="4680"] ul,
.searchandfilter[data-sf-form-id="4680"] > ul > li:first-child {
margin-left: 0;
}
.searchandfilter[data-sf-form-id="4680"] > ul > li {
display: inline-flex;
margin-left: 20px;
padding: 0;
}
body[data-fancy-form-rcs="1"] .searchandfilter[data-sf-form-id="4680"] .fancy-select-wrap {
padding-top: 0;
}
}
This reply has been marked as private.
Add New Note to this Reply
OK. You already have many CSS rules added for the form. You need to remove all of what you have (especially the !important
ones). It might not be perfect, but it will get you there for desktop view:
.searchandfilter[data-sf-form-id="4617"] > ul {
display: flex;
flex-wrap: wrap;
padding: 10px 30px;
}
.searchandfilter[data-sf-form-id="4617"] > ul > li {
float: left;
}
.searchandfilter[data-sf-form-id="4617"] ul {
margin-left: 0px;
}
.searchandfilter[data-sf-form-id="4617"] .sf-field-submit {
clear: both;
}
.searchandfilter[data-sf-form-id="4617"] h4 {
font-size: 1.9rem;
display: inline-block;
min-width: 160px;
flex-grow: 0;
}
.searchandfilter[data-sf-form-id="4617"] .sf-field-search h4 {
padding-top: 10px;
}
.searchandfilter[data-sf-form-id="4617"] .sf-field-taxonomy-audience h4,
.searchandfilter[data-sf-form-id="4617"] .sf-field-taxonomy-resource_type h4 {
min-width: 200px;
}
.searchandfilter[data-sf-form-id="4617"] {
border: 1px solid #cccbcb;
}
.searchandfilter[data-sf-form-id="4617"] ul li.sf-field-reset > input[type=submit],
.searchandfilter[data-sf-form-id="4617"] ul li.sf-field-submit > input[type=submit] {
background-color: #312d7a;
color: #fff;
}
.searchandfilter[data-sf-form-id="4617"] > ul > li {
flex-grow: 1;
}
.searchandfilter[data-sf-form-id="4617"] p {
display: inline-block;
}
.searchandfilter[data-sf-form-id="4617"] .sf-field-search p {
flex-grow: 1;
}
.searchandfilter[data-sf-form-id="4617"] .sf-field-search label {
width: 75%;
}
.searchandfilter[data-sf-form-id="4617"] .sf-input-text {
border-radius: 1.75rem;
}
.searchandfilter[data-sf-form-id="4617"] .sf-input-text {
width: 100%;
}
.searchandfilter[data-sf-form-id="4617"] > ul > li > p > label br {
display: none;
}
.searchandfilter[data-sf-form-id="4617"] > ul > li.sf-field-reset,
.searchandfilter[data-sf-form-id="4617"] > ul > li.sf-field-submit {
flex-grow: 0;
}
.searchandfilter[data-sf-form-id="4617"] .sf-field-reset {
padding-left: 10px;
}
.searchandfilter[data-sf-form-id="4617"] .sf-field-search {
flex: 0 0 100%;
display: flex;
}
.searchandfilter[data-sf-form-id="4617"] select.sf-input-select {
min-width: 300px;
width: auto;
}
Add New Note to this Reply
You have this:
.sf-field-search input, .sf-field-search label {
display: block !important;
width: 100% !important;
border-radius: 30px;
}
You should use this:
.searchandfilter[data-sf-form-id="15236"] .sf-field-search input, .sf-field-search label {
display: block;
width: 100%;
border-radius: 30px;
}
.searchandfilter[data-sf-form-id="15236"] li[data-sf-field-input-type="select"] select,
.searchandfilter[data-sf-form-id="15236"] .sf-field-submit input {
border-radius: 30px;
}
Please note that we are now closed for the day as it is gone 5PM here in the UK. For any further replies, I will be back on again tomorrow.
Add New Note to this Reply
This reply has been marked as private.
Add New Note to this Reply
This search of our forum should give some snippets of how to style the form, but your theme might be overriding the CSS, in which case are you able to send me a live link/URL to your search page so I can take a look? Let me know which elements are resisting styling, and what CSS you had tried that did not work.
The search:
https://support.searchandfilter.com/forums/search/data-sf-form-id+.searchandfilter/
Add New Note to this Reply
You would need to make sure the specificity is correct. This is our standard slider CSS for that color (I believe):
.searchandfilter .noUi-connect {
background-color: #526E91;
}
So you would need custom CSS, something like:
.searchandfilter[data-sf-form-id="1234"] .noUi-connect {
background-color: #ccc;
}
Where you would change the ID to match that of your form, and the color to what you want it to be.
Add New Note to this Reply
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-allplant
First 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%;
}
Add New Note to this Reply
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;
}
Add New Note to this Reply
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.
Add New Note to this Reply