Search Results for '.searchandfilter custom css'

[Trevor]

The free version and the pro version should be OK both activated, but I am unsure if the free will work at the same time.

Are you able to send me a live link/URL to your search page so I can take a look?

You will need to upload that image to a file sharing site. WordPress has such a site if you don’t already have access to one, called Cloudup. Share the link with me here.

One of the reasons so many themes/sites use ‘Select’ replacement scripts is that much of the formatting is done by the browser, and so you have little or no control over that. However, if you can let me know what you want, I can help.

Note that 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.

[Trevor]

I believe that you added some custom css already, so remove this:

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

and add this, I think:

.searchandfilter > ul {
    padding-left: 0;
}
@media only screen and (min-width: 801px) {
    li.sf-field-taxonomy-industry {
        float: left;
        margin-right: 20px;
    }
    li.sf-field-taxonomy-budget {
        float: left;
        margin-right: 20px;
        clear: left;
    }
}
@media only screen and (max-width: 800px) {
    li.sf-field-taxonomy-industry {
      display: inline-block !important;
      vertical-align: top !important;
      margin-right: 20px !important;
  }
    li.sf-field-taxonomy-budget {
      display: inline-block !important;
      vertical-align: top !important;
  }
}
li.sf-field-taxonomy-project_type > ul {
    padding-left: 0;
    columns: 3;
}
@media only screen and (max-width: 600px) {
    li.sf-field-taxonomy-project_type > ul {
        columns: 2;
    }
}
@media only screen and (max-width: 410px) {
    li.sf-field-taxonomy-project_type > ul {
        columns: 1;
    }
}

See how that works for you?

[Trevor]

Add this custom CSS to the theme:

body.sfajax .elementor-255 .elementor-element.elementor-element-f133f8c .elementor-posts-container .elementor-post__thumbnail {
  padding-bottom: 0 !important;
}

Then you need to add a javascript to the page:

<script>
(function ( $ ) {
  "use strict";
  $(document).on("sf:ajaxstart", ".searchandfilter", function(){
    jQuery("body").addClass("sfajax");
  });
}(jQuery));</script>

I am hoping that will do it.

[Trevor]

You can only have one WooCommerce search form, which will need all the possible fields in it, and then use custom CSS to hide different fields on specific pages. To an extent, and with useful screenshots, this is discussed here I think:

https://support.searchandfilter.com/forums/topic/woocommerce-integration-avoid-redirection-to-shop-page/#post-208464

[Trevor]

Custom CSS for you:

.searchandfilter > ul {
  padding-left: 0;
}

[Trevor]

Did you follow the steps outlined in this post:

https://support.searchandfilter.com/forums/topic/dynamic-search-url/#post-215365

The steps are the same for the WooCommerce and Post Type Archive method, but the category/taxonomy MUST also be in the form (even if you hide it with custom CSS (display: none;).

[Trevor]

Does this custom CSS help:

.searchandfilter > ul {
  display: flex;
}
.searchandfilter > ul > li.sf-field-search {
  flex-grow: 0;
  min-width: 190px;
}
.searchandfilter > ul > li.sf-field-search input {
  padding: 13px;
}
.searchandfilter > ul > li.sf-field-category {
  flex-grow: 1;
}
.searchandfilter > ul > li.sf-field-submit {
  flex-grow: 0;
  min-width: 165px;
}
.searchandfilter > ul > li.sf-field-submit input {
  padding: 20px 40px;
}

[Trevor]

You would need Custom CSS like this:

.searchandfilter h4 {
  font-weight: 700;
  color: #080;
}
.et_pb_column_1_3 .searchandfilter h4,
.et_pb_column_1_4 .searchandfilter h4,
.et_pb_column_1_5 .searchandfilter h4,
.et_pb_column_1_6 .searchandfilter h4,
.et_pb_column_2_5 .searchandfilter h4 {
  font-size: 24px;
}
.searchandfilter {
  color: #080;
  font-size: 18px;
}

[Trevor]

As it is one control, you would need this custom CSS instead:

.searchandfilter .sf-field-taxonomy-portfolio_tags > ul > li {
  margin-left: 10px !important;
  display: inline-block;
}
.searchandfilter .sf-field-taxonomy-portfolio_tags > ul {
  padding-left: 0;
}

[Trevor]

Options in a form field can be manually re-arranged if they are Post Meta, but not for taxonomies.

Custom CSS like this would do it:

.searchandfilter .sf-field-taxonomy-age-range > ul > li {
  margin-left: 10px !important;
  display: inline-block;
}