-
AuthorSearch Results
-
December 21, 2020 at 9:24 am #270447
In reply to: Changing the color of the titles of the form
TrevorParticipantThis would fix the alignment:
.searchandfilter[data-sf-form-id="455"] > ul { margin-left: 50px; }
But I do not see any titles?
December 10, 2020 at 2:51 pm #269420In reply to: Sort order doesn’t work
TrevorParticipantTry 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; }
December 4, 2020 at 4:09 pm #268849In reply to: Need form to wrap inside a column
TrevorParticipantYou have some custom CSS there, using Flexbox, so you should utilise that thus:
.searchandfilter[data-sf-form-id="2509"] > ul { flex-wrap: wrap; }
December 3, 2020 at 1:49 pm #268651In reply to: color font & buttons
TrevorParticipantCustom CSS like this:
.searchandfilter[data-sf-form-id="2169"] .sf-field-submit input { border-radius: 5px; color: #282828; background: #78c8ce; }
December 3, 2020 at 11:03 am #268610In reply to: Displaying filter options horizontally
TrevorParticipantYou 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
November 30, 2020 at 4:39 pm #268260In reply to: Align filters in same row
TrevorParticipantYou 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
November 27, 2020 at 3:09 pm #268074In reply to: Reset Button Functionality
TrevorParticipantI 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();
November 26, 2020 at 11:42 am #267912In reply to: Edit fields (width, marges, alignment, ..)
TrevorParticipantSo:
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 V3Q3 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 easierQ4 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.
November 24, 2020 at 2:42 pm #267620In reply to: Styling issues for Search & Filter plugin
TrevorParticipantI 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.
November 19, 2020 at 10:45 am #267061In reply to: Responsive Display Filters
TrevorParticipantUntil 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
-
AuthorSearch Results