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

[Trevor]

I think this custom CSS should sort out the display:

.qodef-page-content-holder .searchandfilter[data-sf-form-id="3372"] ul li::before {
    content: "";
    padding-right: 0;
}
.qodef-page-content-holder .searchandfilter[data-sf-form-id="3372"] ul li {
    padding-left: 0;
    text-indent: 0;
}
.searchandfilter[data-sf-form-id="3372"] ul > li > ul {
    padding-left: 0;
}

The image loading issue is because Lazyload images is ON in JetPack.

[Trevor]

Is this custom CSS what you need?

.searchandfilter[data-sf-form-id="693"] .sf-field-tag > ul {
    columns: 2;
}

[Trevor]

This custom CSS would hide the - separator, the To box, and the To handle of the slider:

.searchandfilter[data-sf-form-id="3918"] .sf-field-post-meta-EI .sf-meta-range-slider .sf-range-values-seperator,
.searchandfilter[data-sf-form-id="3918"] .sf-field-post-meta-EI .sf-meta-range-slider .sf-range-prefix:nth-child(4),
.searchandfilter[data-sf-form-id="3918"] .sf-field-post-meta-EI .sf-meta-range-slider label:nth-child(5),
.searchandfilter[data-sf-form-id="3918"] .sf-field-post-meta-EI .sf-meta-range-slider .meta-slider .noUi-base .noUi-origin:nth-child(3) {
    display: none;
}

I think you might find it easier to use a new plugin we have for the layout and content of the posts. See this post:

https://support.searchandfilter.com/forums/topic/custom-layouts/

Especially as you want only the title.

As to updates, see this post:

https://support.searchandfilter.com/forums/topic/plug-in-update-in-wp-admin/#post-273233

[Anonymous]

Thank you!

This appears to be working for me! Hope this helps anyone else too!

    $('.searchandfilter[data-sf-form-id="15"] ul select').change(function(){

      $('.searchandfilter[data-sf-form-id="15"] ul select').not(this).prop('selectedIndex', 0);

    });

[Trevor]

So, you want the results to reflect only choice made in the last used field?

The form would have to have Auto Submit OFF. It would then require some custom JavaScript to clear the other fields, and then submit the form. To trigger the submit, use JavaScript like (assuming the form has an ID of 1234) this:

$('.searchandfilter[data-sf-form-id="1234"]').submit();

[Trevor]

To trigger the submit, use JavaScript like (assuming the form has an ID of 1234) this:

$('.searchandfilter[data-sf-form-id="1234"]').submit();

[Trevor]

I think I would not show the All Countries option, so maybe use a checkbox control instead?

To show the flags instead of labels, and also hide the input button:

.searchandfilter[data-sf-form-id="14110"] .sf-field-taxonomy-project_company > ul > li {
    margin-right: 20px;
    float: left;
}
.searchandfilter[data-sf-form-id="14110"] .sf-field-taxonomy-project_company > ul > li > input {
    display: none;
}
.searchandfilter[data-sf-form-id="14110"] .sf-field-taxonomy-project_company > ul > li > label {
    color: rgba(0,0,0,0);
    height: 64px;
    width: 64px;
    max-height: 64px;
    overflow: hidden;
}
.searchandfilter[data-sf-form-id="14110"] .sf-field-taxonomy-project_company > ul > li > input[value="austria"] + label {
    background: url(https://www.martabak.vip/wp-content/uploads/2021/01/blue.png);
}
.searchandfilter[data-sf-form-id="14110"] .sf-field-taxonomy-project_company > ul > li > input[value="belgium"] + label {
    background: url(https://www.martabak.vip/wp-content/uploads/2021/01/red.png);
}
.searchandfilter[data-sf-form-id="14110"] .sf-field-taxonomy-project_company > ul > li > input[value="france-property"] + label {
    background: url(https://www.martabak.vip/wp-content/uploads/2021/01/grey.png);
}

[Trevor]

This CSS would add the scrollbar to all checkbox lists in your form:

.searchandfilter[data-sf-form-id="4498"] li[data-sf-field-input-type="checkbox"] ul {
    max-height: 180px;
    overflow: auto;
}

There are many CSS snippets on our forum:

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

I do sometimes provide these, if I have the available time (but I am rather busy at the moment, sorry).

[Trevor]

CSS style from WPBakery is causing this, so this CSS will help:

/* gap between field and next title */
.wpb_text_column .searchandfilter[data-sf-form-id="8463"] > ul > li {
    margin-bottom: 20px
}
/* gap between items in a field */
.wpb_text_column .searchandfilter[data-sf-form-id="8463"] > ul > li > ul > li {
    margin-bottom: 0px;
}

[Trevor]

You would need custom CSS, like this:

.searchandfilter[data-sf-form-id="218"] .sf-field-search input, .sf-field-search label {
    display: block;
    width: 100%;
}
.searchandfilter[data-sf-form-id="218"] > ul {
    margin: 0 7px 0 10px;
}
.searchandfilter[data-sf-form-id="218"] li[data-sf-field-input-type="select"] select,
.searchandfilter[data-sf-form-id="218"] li[data-sf-field-input-type="select"] label {
    width: 100%;
}