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

[Libby Gorman]

I have already tried a few things with 7085 and none of the CSS worked so I removed it.

Can I leave the current CSS and add “7085” next to where it says “6646” or should I create a whole new line of CSS for the 7085 form?

For example, here’s a piece of CSS – Can I add 7085 next to the 6446 or make a whole new snippet for 7085?

.searchandfilter[data-sf-form-id="6646"] ul {
  padding-left: 0;
}

I’ve tried different things and haven’t been able to get the columns to fit on mobile for my archive pages, just wondering the best practice for applying it to two different forms, thanks!

Add New Note to this Reply

[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