-
AuthorSearch Results
-
September 21, 2020 at 3:33 pm #260191
In reply to: Display Search Tag Under Group Name Heading
TrevorParticipantThis would need to be inside some responsive media query so it only applies to desktop?
.entry-content .searchandfilter[data-sf-form-id="598"] li.sf-field-taxonomy-download_tag > ul { columns: 3; } .entry-content .searchandfilter[data-sf-form-id="598"] li.sf-field-taxonomy-download_tag > ul > li { margin-bottom: 0; }
September 16, 2020 at 12:20 pm #259646In reply to: Pods and Search and Filter
TrevorParticipantCan you remove these blocks that I gave you:
.searchandfilter[data-sf-form-id="169924"] > ul > li > ul > li > ul > li { margin-left: 10px; } .searchandfilter[data-sf-form-id="169924"] > ul > li > ul > li > ul > li:first-child { margin-left: 0; }
and replace with this:
.searchandfilter[data-sf-form-id="169924"] ul > li[data-sf-field-input-type=checkbox] > ul > li > label { padding-left: 0; } .searchandfilter[data-sf-form-id="169924"] li.sf-field-taxonomy-mars_category > ul > li { padding: 10px 0 10px 10px; } .searchandfilter[data-sf-form-id="169924"] > ul > li > ul > li > ul > li { display: inline-block; } .searchandfilter[data-sf-form-id="169924"] > ul > li > ul > li > ul > li { margin-right: 10px; }
September 15, 2020 at 4:14 pm #259522In reply to: Display Results
TrevorParticipantI will take the first post:
Your theme has this CSS:
.traveltour-body h4 { color: #383838; font-size: 28px; font-family: "Poppins", sans-serif; margin-top: 0px; margin-bottom: 20px; line-height: 1.2; font-weight: 700; }
To control this, you need custom CSS like this:
`.traveltour-body .searchandfilter[data-sf-form-id=”22″] h4 {
/* CSS rules */
}To the second question:
I am not sure if that date will be a problem in that format. Maybe, maybe not. You would need to test. Ideally, it should be
20200918
for example. It should not matter that it is not datetime.At the moment, you need to use both From and To. The To field can be hidden, and you can use JavaScript to fill it with a long away date when the page opens. We will change/enhance the form field date match/range options in V3, due in a few months.
September 12, 2020 at 8:28 am #259243In reply to: Dropdown doesn’t work on Elementor page
TrevorParticipantI can see that something is applying ‘Nice Select’ javascript to our select box (maybe your theme), which is hiding our field and showing a different field, but it is not copying across the terms. That you would need to talk with the theme author about (probably best to stop it from doing that). Some custom CSS could hide the nice select version of the field and reveal our field. For example:
.searchandfilter[data-sf-form-id="4693"] .sf-input-select:not(.nice-select) { display: inline-block !important; } .searchandfilter[data-sf-form-id="4693"] .sf-input-select.nice-select { display: none; }
September 10, 2020 at 4:32 pm #259074In reply to: Horizontal serach bar
TrevorParticipantThis 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; } }
September 3, 2020 at 12:27 pm #258369In reply to: How to display filter form horizontally
TrevorParticipantOK. 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; }
September 2, 2020 at 9:51 pm #258253In reply to: border radius CSS
TrevorParticipantYou 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.
August 28, 2020 at 1:56 pm #257666In reply to: Unable to modify form using CSS
TrevorParticipantThis 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/
August 21, 2020 at 9:55 am #256872In reply to: How to change color?
TrevorParticipantYou 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.
August 20, 2020 at 4:00 pm #256765In reply to: Top page filterbox with sliders
AnonymousInactiveHi 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%;
} -
AuthorSearch Results