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

[Trevor]

If you make this search on our forum you will see some snippets:

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

Also, you can use your browser’s web developer tools inspector to look at you form. In Chrome press F12 to open the tools (or Ctrl + Shift + i), see here for an example:

https://www.screencast.com/t/YwjnhhNA

Add New Note to this Reply

[BOUCHAIR Yacine]

Hello
I don’t know why don’t see my code, it was :

.sf-field-taxonomy-destination .sf-level-2 { display: none; }
.sf-field-taxonomy-destination .sf-level-0 { display: none; }

Now, I changed with your code :

.searchandfilter[data-sf-form-id=”157762″] > ul > li.sf-field-taxonomy-destination .sf-level-2,
.searchandfilter[data-sf-form-id=”157762″] > ul > li.sf-field-taxonomy-destination .sf-level-0 {
display: none;
}

As i understand we can’t sort them directly by level 1?

Thank you

Add New Note to this Reply

[Trevor]

I don’t see this CSS in there:

.sf-level-2 { display: none; }
.sf-level-0 { display: none; }

Which should be:

.searchandfilter[data-sf-form-id="157762"] > ul > li.sf-field-taxonomy-destination .sf-level-2,
.searchandfilter[data-sf-form-id="157762"] > ul > li.sf-field-taxonomy-destination .sf-level-0 {
  display: none;
}

But, I understand why it does not sort now. You are keeping only level 1. But they are still sorted under level 0, then level 1.

Add New Note to this Reply

[Trevor]

And this CSS for the ORs:

.searchandfilter[data-sf-form-id="157762"] > ul > li.sf-field-taxonomy-theme_voyage:before,
.searchandfilter[data-sf-form-id="157762"] > ul > li.sf-field-taxonomy-meilleur_mois_voyage:before {
    content: "OR";
    display: block;
    position:absolute;
    margin-left: -35px;
    margin-top: 45px;
    font-family: Oswald,sans-serif;
    font-size: 18px;
}
.searchandfilter[data-sf-form-id="157762"] > ul > li.sf-field-taxonomy-theme_voyage,
.searchandfilter[data-sf-form-id="157762"] > ul > li.sf-field-taxonomy-meilleur_mois_voyage {
    padding-left: 40px;
}

Add New Note to this Reply

[Trevor]

Soemthing more like this then:

.searchandfilter[data-sf-form-id="2275"] > ul > li > ul > li {
    display: inline-block;
    margin-right: 15px;
}
.searchandfilter[data-sf-form-id="2275"] > ul > li > h4,
.searchandfilter[data-sf-form-id="2275"] > ul > li > ul {
    display: inline-block;
}
.searchandfilter[data-sf-form-id="2275"] > ul > li {
    display: inline-block;
    margin-right: 15px;
}

Add New Note to this Reply

[Trevor]

Is this custom CSS what you need?

.searchandfilter[data-sf-form-id="2275"] > ul > li > ul > li {
    display: inline-block;
    margin-right: 15px;
}

Add New Note to this Reply

[Trevor]

With the current version, what you want to do is not possible (have two forms that work together to filter the same posts listing on the same page as the filters).

#4. I am sorry, no. In V3 (due soon), we will make it possible to separate the fields of a form to place them where you want on the page, so, you would be able to split the form into two parts (or even more). I think that would meet your needs.

#1. Only some custom JavaScript will do as you want with the current version of the plugin, but, again, V3 should bring the option you want (to hide the field title when there are no terms to show).

#2. Some custom CSS will be needed, to set the options to display: inline-block, and also to have some margin between them (probably margin-right). See also #3:

.searchandfilter[data-sf-form-id="2325"] .sf-field-taxonomy-portfolio_category li {
    display: inline-block;
    margin-right: 15px;
}

#3. Either use custom CSS to hide the first option, or switch to checkboxes (which do not have the ‘all’ option). The problem with hiding the first option on a radio button list is that, after you have made a selection, you cannot deselect it without selecting another option (i.e. cannot have none selected). My advice would be to switch to checkboxes.

#5. I am not sure what you mean? Do you mean to make the text labels be the filters, like a tag cloud? If so, that is possible with some custom CSS, where the checkbox or radio button is hidden and the selected term highlights in some way when selected (text color or background color).

Please note that we are now into an extended public holiday weekend (Friday to Monday inclusive) here in the UK. We may be working for some of this period, but replies may be delayed at times.

Add New Note to this Reply

[Trevor]

I might have used this CSS:

.searchandfilter[data-sf-form-id="289"] {
    display: table;
    margin: 0 auto
}
.searchandfilter[data-sf-form-id="289"] > ul {
    column-count: 3;
    -moz-column-count: 3;
    -webkit-column-count: 3;
    width: 100%;
}
.searchandfilter[data-sf-form-id="289"] > ul > li {
  -webkit-column-break-inside: avoid;
  -moz-column-break-inside:avoid;
  -moz-page-break-inside:avoid;
  page-break-inside: avoid;
}
.elementor-widget-container .searchandfilter[data-sf-form-id="289"] ul li {
  margin-bottom: 0;
}

To avoid the use of absolute, left and top in your css. Also, this should be restricted using a media query to desktop screen widths.

In V3 (due soon), we will allow you to place individual fields within your theme or page builder blocks or templates.

Please note that we are now into an extended public holiday weekend (Friday to Monday inclusive) here in the UK. We may be working for some of this period, but replies may be delayed at times.

Add New Note to this Reply

[Trevor]

Could you first change the combobox script to Select2 (there is an option in our settings page to choose which Combobox script to use). Your current form uses Chosen, which is set within our plugin by default. However, it is now pretty much abandoned and has not received any major updates in a long time. It has poor support for iOS devices for example.

Select2 is maintained now by the WooCommerce team, who are, of course, owned by Automattic, the owners of WordPress, and as such is used by a lot of themes and plugins.

This custom CSS might then do it for you:

.searchandfilter[data-sf-form-id="9331"] li.sf-field-search input,
.searchandfilter[data-sf-form-id="9331"] li.sf-field-search label,
.searchandfilter[data-sf-form-id="9331"] .select2-container {
  min-width: 100%;
}

Please note that we are now into an extended public holiday weekend (Friday to Monday inclusive) here in the UK. We may be working for some of this period, but replies may be delayed at times.

Add New Note to this Reply

[Trevor]

One thing that I think it needs is this:

.searchandfilter[data-sf-form-id="5236"] li.sf-field-taxonomy-product_cat > ul > li label:hover {
  cursor: pointer;
}

So, to your question. This:

.searchandfilter[data-sf-form-id="5236"] li.sf-field-taxonomy-product_cat .sf-input-checkbox:checked + .sf-label-checkbox {
color: #fff;
background: #960E12
}

Needs to be:

.searchandfilter[data-sf-form-id="5236"] li.sf-field-taxonomy-product_cat .sf-input-checkbox:checked + .sf-label-checkbox {
color: #fff;
background: #960E12;
line-height: 26px;
}

Add New Note to this Reply