Edit fields (width, marges, alignment, ..)

Ruben

#266011

Hi there,

How can I edit each field of the filter?
Like the: width, marges, padding, alignment, etc.

Example 1: I would like the search area to be 50% of the total width, on a own column.
Example 2: I woud like the first row to have two fields and 10px padding on the bottom.

Regards,

Ruben
My website

Add New Note to this Reply

Trevor Moderator

#266056

You would need to create custom CSS for that. There are many snippets in the forum:

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

I do sometimes create some custom CSS for users, but that is generally outside the scope of our support, and is done mainly if I have time. At the moment, there may be a delay if you want that.

If you want me to help with this, could you make an annotated screenshot of what you see and upload it to a file sharing site (like the WordPress Cloudup site) and share the link for the set with me? Please use a Private Reply.

If you can give me a URL to that page so I can see it live (I will need this)?

Add New Note to this Reply

Ruben

#267757

This reply has been marked as private.

Add New Note to this Reply

Trevor Moderator

#267912

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.

Add New Note to this Reply

Ruben

#268301

Thanks for your detailed answer. That’s motivating.

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

Yes, that would be exactly what I want, just this example.

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

I want to filter by clicking the stars in the filter. I’m looking forward to V3 to make this happen.

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

Works great, thanks!

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.

If this could be done in Elementor that would be great.
But if it can be done on the WordPress dashboard that’s also helping.

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

Perfect, this work great by just changing the padding. Thanks!

Good luck with the developent of V3.

Add New Note to this Reply

Trevor Moderator

#268356

Thanks for getting back to me. I will close this thread for now.

Add New Note to this Reply

[Author]

Posts