Search Results for 'searchandfilter data-sf-form-id'

[Trevor]

Yes, but it would require custom CSS, depending on what you need. If you are using select dropdown fields, I would suggest using comboboxes.

You may need to make some changes.

Go to wp-admin -> Search & Filter -> Settings -> Combobox Script

Change this from Chosen to Select2 – we’re dropping support for Chosen in v3, because it has too many issues on mobile.

Next, in the form field settings, select the combobox option for each.

There is an alternate way of doing this, but this is the easiest. Now you can style the resulting select as it is not a select!

You may you may need to hire a third party coder to help you. This search will give some code snippets to help that coder:

https://support.searchandfilter.com/forums/search/data-sf-form-id+.searchandfilter/

Add New Note to this Reply

[Cristina Morbidoni]

This reply has been marked as private.

Add New Note to this Reply

[Marcel Westerhoff]

Just one more question: I work with multiple forms. I know how to add the css rules but am not sure how to add those to the script. Just like this?

<script>(function ( $ ) {
“use strict”;
$(document).on(“sf:ajaxformstart”, “.searchandfilter”, function(){
$(‘.searchandfilter[data-sf-form-id=”10574″, data-sf-form-id=”13928″] li.sf-field-submit input’).addClass(‘disabled’);
});
$(document).on(“sf:ajaxformfinish”, “.searchandfilter”, function(){
$(‘.searchandfilter[data-sf-form-id=”10574″, data-sf-form-id=”13928″] li.sf-field-submit input’).removeClass(‘disabled’);
});
}(jQuery));</script>

Add New Note to this Reply

[Trevor]

Can you fist change this custom CSS:

li.sf-field-submit input {
    border: 0px !important;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 20px;
    color: #2B255D !important;
    background-color: #FFD618 !important;
}
li.sf-field-submit input:hover {
    background-color: #2B255D !important;
    color: #FFD618 !important;
}

to this (no !importants):

.searchandfilter[data-sf-form-id="10574"] li.sf-field-submit input {
    border: 0px;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 20px;
    color: #2B255D;
    background-color: #FFD618;
}
.searchandfilter[data-sf-form-id="10574"] li.sf-field-submit input:hover {
    background-color: #2B255D;
    color: #FFD618;
}
.searchandfilter[data-sf-form-id="10574"] li.sf-field-submit input.disabled,
.searchandfilter[data-sf-form-id="10574"] li.sf-field-submit input.disabled:hover {
    color: #aaa;
    background-color: #ddd;
    cursor: default;
}

So the code becomes:

<script>(function ( $ ) {
 "use strict";
 $(document).on("sf:ajaxformstart", ".searchandfilter", function(){
	$('.searchandfilter[data-sf-form-id="10574"] li.sf-field-submit input').addClass('disabled');
 });
 $(document).on("sf:ajaxformfinish", ".searchandfilter", function(){
	$('.searchandfilter[data-sf-form-id="10574"] li.sf-field-submit input').removeClass('disabled');
 });
}(jQuery));</script>

I think. If it doesn’t work, then check if the script is actually on the page. How did you add it to the page?

Add New Note to this Reply

[Trevor]

This 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;
}

Add New Note to this Reply

[Trevor]

This reply has been marked as private.

Add New Note to this Reply

[Trevor]

Can 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;
}

Add New Note to this Reply

[Trevor]

This reply has been marked as private.

Add New Note to this Reply

[Trevor]

I 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.

Add New Note to this Reply

[Trevor]

I 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;
}

Add New Note to this Reply