Search Results for '.searchandfilter custom css'

[Anonymous]

Hey there,
I just purchased the pliugin. I tried your custom css in both these 2 versions but it doesn’t work (also adding the !important attribute), any reason why?

.searchandfilter > ul > li {
display: inline-block;
vertical-align: top;
padding: 0 20px;
}

.searchandfilter[data-sf-form-id=”9707″] > ul > li {
display: inline-block !important;
vertical-align: top;
padding: 0 20px;
}

This is the test page I built Test page

Thanks!

[Trevor]

To do this you will need to create custom CSS. There are many posts with examples in. This search will reveal many:

https://support.searchandfilter.com/forums/search/.searchandfilter+.sf-input-radio/

[Trevor]

For me the search is working, but the URL still does not update.

For example, if I search for ‘Édition sur mesure’ I get 3 results. If I click ‘Décor’ it adds one post (you have the field relationship set to OR, so it adds selections. It is hard to see which have been chosen as your theme has hidden the checkboxes with this CSS:

[type="checkbox"], [type="radio"] {
    display: none;
}

You could show them by adding this custom CSS:

.searchandfilter [type="checkbox"], [type="radio"] {
    display: inline-block;
}

[Trevor]

This is the CSS I usually use:

.searchandfilter li.sf-field-search label,
.searchandfilter li.sf-field-search input {
    width: 100%;
}

Also, I would make the single field search form to have the ‘Custom’ display results method and enter the results URL and make sure Ajax is OFF for that form.

Is it OK to close this thread?

[Trevor]

If Elementor is providing the grid, please see this post:

https://searchandfilter.com/documentation/3rd-party/elementor/

as changed here:

https://support.searchandfilter.com/forums/topic/how-to-display-filter-result-on-the-current-page-like-genres-in-demo-site/#post-205020

Did you do that already?

You also have Custom CSS coming out in the posts?

[Trevor]

You want the options made narrow? This is not possible using CSS. As explained in this third party help page:

https://stackoverflow.com/questions/36676701/set-width-at-option-of-select-box

As an alternative, you could apply Select2 to the boxes (which would make them work better I think on mobile anyway). See this post for instructions:

https://support.searchandfilter.com/forums/topic/how-can-i-customize-the-form-with-css/#post-199584

[Trevor]

I can see that you have this Custom CSS:

.searchandfilter h4 {
    margin: 0 -20px;
    font-family: 'Microsoft Jhenghei', 'Noto Sans TC', sans-serif !important;
}
.sf-input-select {
    margin: 0 -20px;
    font-family: 'Microsoft Jhenghei', 'Noto Sans TC', sans-serif !important;
    font-size: 16px;
}
.sf-field-submit {
    margin: 0 -20px !important;
    font-size: 16px;
}

Remove the margins from these and add this Custom CSS:

.searchandfilter > ul {
  padding-left: 0;
}
.searchandfilter li.sf-field-category label,
.searchandfilter li.sf-field-category select.sf-input-select {
  width: 100%;
}
#search-filter-form-4275 {
  margin-right: -32px;
}

[Trevor]

You could try this custom CSS:

.searchandfilter .sf-field-search input {
  height: 2.65em;
}
.searchandfilter .sf-field-search label:before {
  content: "";
  padding: 1em;
  display: block;
}

[Trevor]

Looking at that archived page, it was 1.4.3, but that version is very, very old and the codebase of the current version is very much changed.

It looks like you need to change the CSS being used. An example of how an Alphabetised field would now be done, assuming that you have a custom field with the one letter in it. Have a look at these two threads (the private posts are not relevant):

https://support.searchandfilter.com/forums/topic/a-to-z-filter/

https://support.searchandfilter.com/forums/topic/a-to-z-filter-2/

I will send another post after this one to deal with the color swatch issue.

[Trevor]

As you are not wanting to remove slides, that line can probably go. So, maybe this:

<script>(function ( $ ) {
  "use strict";
  $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
    $('.visuels-realisations').slick('unslick');
    $('.visuels-realisations').slick(getSliderSettings());
  });
}(jQuery));</script>

If you don’t know how to add JS to your site, you can use this plugin:

https://wordpress.org/plugins/custom-css-js/

You won’t need the script tags, as that plugin adds them for you.