Search Results for '.searchandfilter custom css'

[Trevor]

We do not use languages files, sorry. If you are using the shortcode display results method and need to translate the strings in the results template file, you can make your own custom template (the strings are easy to find and change):

https://searchandfilter.com/documentation/search-results/using-a-shortcode/#customising-the-results

To make the form horizontal:

https://searchandfilter.com/documentation/getting-started/display-search-form/#making-your-search-form-horizontal

There are many snippets of CSS in the forum:

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

[Trevor]

I think this custom CSS makes it look better?

.searchandfilter[data-sf-form-id="5450"] {
  padding: 20px;
}
.searchandfilter[data-sf-form-id="5450"] > ul {
  margin: 0;
}
.searchandfilter[data-sf-form-id="5450"] li.sf-field-search input,
.searchandfilter[data-sf-form-id="5450"] li.sf-field-search label,
.searchandfilter[data-sf-form-id="5450"] li[data-sf-field-input-type="select"] label,
.searchandfilter[data-sf-form-id="5450"] li[data-sf-field-input-type="select"] select,
.searchandfilter[data-sf-form-id="5450"] li[data-sf-field-input-type="daterange"] label,
.searchandfilter[data-sf-form-id="5450"] .select2-container {
  min-width: 100%;
}

[Trevor]

Custom CSS like this (adjust the height to suit):

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

[Trevor]

This custom CSS should do it:

.searchandfilter[data-sf-form-id="8213"] .sf-field-search label {
  width: 100%;
  padding-right: 5px;
}

I had to add 5px right padding because you had added this CSS already:

.searchandfilter ul li {
    background-color: #efefef;
    padding: 20px 15px 20px 20px;
}

Where the right padding was only 15px, whereas the left padding is 20px, so it looked odd otherwise.

[Trevor]

Some custom CSS would do this for you, like:

.searchandfilter ul li.sf-field-reset,
.searchandfilter ul li.sf-field-submit {
  display: inline-block;
}

[Trevor]

You would need to add custom CSS to your theme, like this:

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

[Trevor]

I can see the issue. Your theme is applying some form of JavaScript-based customization to all select dropdown boxes on the site. It would be better to find a way to disable that, however, this custom CSS will fix it (you can place this in the Appearance -> Customize section):

.searchandfilter .sod_select .sod_list_wrapper,
.searchandfilter .sod_select .sod_label,
.searchandfilter .sod_select:before,
.searchandfilter .sod_select:after {
  display: none;
}
.searchandfilter .sod_select select {
  display: block !important;
}
.searchandfilter .sod_select {
    line-height: inherit;
    width: auto;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font-size: inherit;
    outline-offset: inherit;
    margin-bottom: 0;
    border-radius: 0;
    height: auto;
}

[Trevor]

With the current version of the plugin, the reset link must be in the form, and not elsewhere on the page. This will change in V3 (due in a few months), when you will be able to move it. You can style the link, using Custom CSS. A search of the forum may reveal some snippets already posted:

https://support.searchandfilter.com/forums/search/sf-field-reset+background/

Such as this post:

https://support.searchandfilter.com/forums/topic/change-styling-of-reset-and-submit-buttons/#post-180124

[Trevor]

A number of issues there. Many of the elements of a form are styled by the browser and the operating system and are not affected by CSS.

As browsers go through regular updates, they change their styling of these things to suit latest ‘fashions’. I noticed recently that Chrome made such a change.

You have Elementor, but not Elementor Pro? I understand one is paid, so not everyone will use it.

If you are making custom CSS, you need to get the specificity correct, otherwise it will not override existing CSS. This means using the browser web developer inspector to see what current selectors in the CSS set a particular attribute, and using that with added specificity, usually like:

.searchandfilter[data-sf-form-id="1428"] .select2-container {
  margin: 5px;
}

So, I would need to see what you are trying to change (a live link/URL), and with what CSS.

[Trevor]

Ah, that we have little or no control over. Let me explain, and then offer a ‘Select’ replacement script as a possible solution (used by many themes).

One of the reasons so many themes/sites use ‘Select’ replacement scripts is that much of the formatting of standard select controls is done by the browser, and so you have little or no control over that.

The Chosen script is included with/used by our plugin by default. However, it is now pretty much abandoned and has not received any major updates in a long time. It has poor support for iOS devices for example.

In the current version of our plugin, there is an option in our settings page to choose which (Combobox) script to use. If you change this to Select2, that script is then available for you to apply to the form (see below for how). Select2 is maintained now by the WooCommerce team, who are, of course, owned by Automattic, the owners of WordPress, and as such is used by a lot of themes and plugins.

If you want the select box with a search box at the top, you need to add this JavaScript to the page:

<script>
(function ( $ ) {
  $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
    $('select.sf-input-select').select2();
  });
}(jQuery));
jQuery(document).ready(function($){
  $('select.sf-input-select').select2();
});
</script>

If you want it without the search box at the top of the select boxes, then this:

<script>
(function ( $ ) {
  $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
    $('select.sf-input-select').select2({minimumResultsForSearch: -1});
  });
}(jQuery));
jQuery(document).ready(function($){
  $('select.sf-input-select').select2({minimumResultsForSearch: -1});
});
</script>

This post shows the complete Select2 CSS that we already include in our plugin:

https://support.searchandfilter.com/forums/topic/customise-dropdown-combobox/#post-180345

At the end is an example of how to modify it.