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

[Trevor]

This would fix the alignment:

.searchandfilter[data-sf-form-id="455"] > ul {
    margin-left: 50px;
}

But I do not see any titles?

[Trevor]

Try this custom CSS:

.searchandfilter[data-sf-form-id="3664"] .sf-field-search input, .sf-field-search label {
    display: block;
    width: 100%;
}
.searchandfilter[data-sf-form-id="3664"] ul {
    padding-left: 0;
}
.searchandfilter[data-sf-form-id="3664"] li[data-sf-field-input-type="select"] select,
.searchandfilter[data-sf-form-id="3664"] li[data-sf-field-input-type="select"] label {
    width: 100%;
}
.searchandfilter[data-sf-form-id="3664"] .meta-slider {
    max-width: calc(100% - 21px);
    margin-left: 5px;
}

[Trevor]

You have some custom CSS there, using Flexbox, so you should utilise that thus:

.searchandfilter[data-sf-form-id="2509"] > ul {
    flex-wrap: wrap;
}

[Trevor]

Custom CSS like this:

.searchandfilter[data-sf-form-id="2169"] .sf-field-submit input {
    border-radius: 5px;
    color: #282828;
    background: #78c8ce;
}

[Trevor]

You would need to create your own CSS for the form, using CSS media queries to make the CSS responsive. For example, you can wrap your CSS for the desktop display (horizontal) so it does not affect the mobile view, but you need to discover the responsive breakpoint of your theme (change the 992px to suit). For example, like this:

@media (min-width: 992px) {
  .searchandfilter[data-sf-form-id="1234"] {
    display: inline-block;
    vertical-align: top;
    padding: 0 20px;
  }
}

Where 1234 needs to be changed to match your form ID.

For more custom CSS examples, there are many snippets in the forum:

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

[Trevor]

You would need to create your own CSS for the form, using CSS media queries to make the CSS responsive. For example, you can wrap your CSS for the desktop display (horizontal) so it does not affect the mobile view, but you need to discover the responsive breakpoint of your theme. For example, like this:

@media (min-width: 993px) {
  .searchandfilter[data-sf-form-id="4997"] {
    display: inline-block;
    vertical-align: top;
    padding: 0 20px;
  }
}

For more custom CSS examples, there are many snippets in the forum:

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

[Trevor]

I am not entirely sure how you envisage that. I assume you have two fields in the form. Are you meaning that if the user selects a certain taxonomy term in one field, the other field then needs to set a certain value, and clear the choice the user makes?

If that is what you want, I am not sure a reset is needed, or even the best solution. Instead, it might be best to have Auto Submit OFF, add a submit button to the form, and then create some JavaScript that monitors the field to see a certain choice has been made, and if it is, then reset that one field, and set the required value on the other field, then the user can submit the form as usual with the button, or indeed you could have the javascript trigger the submit button for you.

That javascript would be custom and would have to be written by you. To trigger the submit, using JavaScript like (assuming the form has an ID of 1234) this:

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

[Trevor]

So:

Q1 Move the sort-dropdown to be in the top right (I read that’s not possible in the current version?)
A1 You are correct, this will come in V3 (due in a few months)

Q2 Make a dropdown multi-select of ‘Eten & drinken‘ and ‘Faciliteiten‘
A2 You want this to be a dropdown with checkboxes? I think that this too will come in V3

Q3 Use stars in stead of the range-bar, because it’s about review-score. The stars should be colored when you pick them.
A3 I can only think this would require some custom JavaScript to enable the click on the stars to change the slider (that could be hidden). But to add the stars themselves, again, V3 would make this a lot easier

Q4 Some space between the dropdown with option ‘Relevantie‘ and ‘Filters wissen‘
A4 Custom CSS would be needed:

.searchandfilter[data-sf-form-id="3835"] .sf-field-reset {
    margin-top: 15px;
}

With V3, you will have more flexibility to style things using classes, but I am not sure how much control we can give you in the Elementor widget settings. But, something for us to consider.

You don’t mention the spacing you indicated in the screenshot, for ‘Eten & drinken‘ and ‘Faciliteiten‘, like this:

.searchandfilter > ul > li[data-sf-field-input-type="checkbox"] > ul > li {
    padding-top: 5px;
    padding-bottom: 5px;
}

5px is what it is currently set at, so increase those for more gap, decrease for less gap.

[Trevor]

I believe this CSS should get you started:

.et-db #et-boc .et-l .et_pb_module .searchandfilter[data-sf-form-id="1129"] li.sf-field-taxonomy-project_category > ul {
    max-height: 180px;
    overflow: auto;
    margin-left: 0;
}
.et-db #et-boc .et-l .et_pb_module .searchandfilter[data-sf-form-id="1129"] li > h4 {
    margin-top: 15px;
}
.et-db #et-boc .et-l .et_pb_module .searchandfilter[data-sf-form-id="1129"] li[data-sf-field-input-type="checkbox"] ul input {
    float: left;
    clear: left;
    margin-right: 10px;
    height: 16px;
}
.searchandfilter[data-sf-form-id="1129"] li[data-sf-field-input-type="checkbox"] ul label {
    float: left;
    line-height: 20px;
}
#et-boc .et-l .searchandfilter[data-sf-form-id="1129"] li[data-sf-field-input-type="checkbox"] > ul > li {
    margin-bottom: 10px;
    display: flex;
}

I can’t help you with the sticky widget question, sorry.

[Trevor]

Until V3, you can have a field only in the one type on the page. In V3 (due in a few months), you will be allowed to have the fields multiple times, to allow showing of different format fields responsively.

You would need to create your own CSS for the form, using CSS media queries to make the CSS responsive. For example, you can wrap your CSS for the desktop display (horizontal) so it does not affect the mobile view, but you need to discover the responsive breakpoint of your theme. For example, like this:

@media (min-width: 992px) {
  .searchandfilter[data-sf-form-id="1234"] {
    display: inline-block;
    vertical-align: top;
    padding: 0 20px;
  }
}

Where 1234 needs to be changed to match your form ID.

For more custom CSS examples, there are many snippets in the forum:

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