Search Results for '.searchandfilter custom css'

[Trevor]

With the current version, what you want to do is not possible (have two forms that work together to filter the same posts listing on the same page as the filters).

#4. I am sorry, no. In V3 (due soon), we will make it possible to separate the fields of a form to place them where you want on the page, so, you would be able to split the form into two parts (or even more). I think that would meet your needs.

#1. Only some custom JavaScript will do as you want with the current version of the plugin, but, again, V3 should bring the option you want (to hide the field title when there are no terms to show).

#2. Some custom CSS will be needed, to set the options to display: inline-block, and also to have some margin between them (probably margin-right). See also #3:

.searchandfilter[data-sf-form-id="2325"] .sf-field-taxonomy-portfolio_category li {
    display: inline-block;
    margin-right: 15px;
}

#3. Either use custom CSS to hide the first option, or switch to checkboxes (which do not have the ‘all’ option). The problem with hiding the first option on a radio button list is that, after you have made a selection, you cannot deselect it without selecting another option (i.e. cannot have none selected). My advice would be to switch to checkboxes.

#5. I am not sure what you mean? Do you mean to make the text labels be the filters, like a tag cloud? If so, that is possible with some custom CSS, where the checkbox or radio button is hidden and the selected term highlights in some way when selected (text color or background color).

Please note that we are now into an extended public holiday weekend (Friday to Monday inclusive) here in the UK. We may be working for some of this period, but replies may be delayed at times.

[Trevor]

Could you first change the combobox script to Select2 (there is an option in our settings page to choose which Combobox script to use). Your current form uses Chosen, which is set within 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.

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.

This custom CSS might then do it for you:

.searchandfilter[data-sf-form-id="9331"] li.sf-field-search input,
.searchandfilter[data-sf-form-id="9331"] li.sf-field-search label,
.searchandfilter[data-sf-form-id="9331"] .select2-container {
  min-width: 100%;
}

Please note that we are now into an extended public holiday weekend (Friday to Monday inclusive) here in the UK. We may be working for some of this period, but replies may be delayed at times.

[Trevor]

This custom CSS would do the inline bit I think:

.searchandfilter ul li.sf-field-post_date ul li {
  display: inline-block;
}

Can you let me know what dates can’t be selected?

[Trevor]

Chosen is included with 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.

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.

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]

Maybe the method described in this post would help one form to work on any Category page:

https://support.searchandfilter.com/forums/topic/urgent-custom-search-pages/#post-236735

Note, the ID number in the CSS would need to change to match that of your form.

[Trevor]

I split your message from the other thread so I can address your question directly. You need to create a specific results page and follow this guidance carefully (you must use the Posts module as directed):

https://support.searchandfilter.com/forums/topic/how-can-i-search-elemntor-column-while-retaining-the-design-of-that-column/#post-209754

You might also benefit from some custom CSS that I can give you after we get it working, to improve the margins and paddings that your theme seems to be adding.

[Trevor]

If these are what are known as category term archive pages, such as:

mywesbite.com/category/cat1/ or mywesbite.com/cat1/ (depending on how your permalinks are setup)

Then set the Display Results method to ‘Post Type Archive’, place the category field in the form, and then use custom CSS to hide it, maybe (where the ID number changes to match that of your form):

.searchandfilter[data-sf-form-id="1428"] .sf-field-category {
  display: none;
}

And then, on the General Settings tab, enable Auto Count (both settings) and also Auto Detect for Tags, Categories and Taxonomies.

Then, in the custom field and tag fields, set these to Hide Empty.

This assumes that you theme uses fairly standard PHP archive templates.

This method would mean you use one form that will change/adapt depending on the page it is on.

[Trevor]

If there is no other place to add custom CSS in your theme, then Customize – Additional CSS will suffice.

I think this is it then:

.searchandfilter[data-sf-form-id="2703"] select.sf-input-range-select {
  border: 1px solid #aaa;
  padding: 2px 0;
  border-radius: 4px;
}
.searchandfilter[data-sf-form-id="2703"] > ul > li:first-child {
  margin-left: 0;
  padding-top: 0;
}
.searchandfilter[data-sf-form-id="2703"] li.sf-field-search h4 {
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 3px;
  padding-top: 0;
}
.searchandfilter[data-sf-form-id="2703"] h4 {
  font-size: 16px;
  font-weight:600;
  color: #02213d;
}
.searchandfilter[data-sf-form-id="2703"] select,
.searchandfilter[data-sf-form-id="2703"] .select2-container .select2-results__option,
.searchandfilter[data-sf-form-id="2703"] .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: black;
  font-size: 14px;
}
.searchandfilter[data-sf-form-id="2703"] li.sf-field-search input,
.searchandfilter[data-sf-form-id="2703"] li.sf-field-search label,
.searchandfilter[data-sf-form-id="2703"] .select2-container {
  min-width: 100%;
}
.searchandfilter[data-sf-form-id="2703"] > ul {
  margin: 20px;
  border: 1px solid #02213d;
  padding: 15px;
  background: #f3f3f3;
}
.searchandfilter[data-sf-form-id="2703"] .meta-slider {
  max-width: calc(100% - 12px);
}
.searchandfilter[data-sf-form-id="2703"] li .sf-meta-range.sf-meta-range-slider label  {
  width: calc(50% - 9px);
}
.searchandfilter[data-sf-form-id="2703"] li .sf-meta-range.sf-meta-range-slider input {
  width: 100%;
  max-width: 100%;
  font-size: 14px;
  color: #000;
  border-color: #02213d;
}
.searchandfilter[data-sf-form-id="2703"] .select2-container .select2-selection,
.select2-container--open .select2-dropdown--above {
  border-color: #02213d;
}
.searchandfilter[data-sf-form-id="2703"] .select2-container, .select2-container--open {
  font-size: 14px;
  color: #000;
}
.select2-container--open .select2-search--dropdown .select2-search__field {
  border-color: #02213d;
}

[Trevor]

Before I answer the question, you need a little snippet of Custom CSS to override your theme CSS:

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

Are you able to show me a page in your site where the format of the posts/products looks as you want?

[Trevor]

I am not sure if this works for you, as Custom CSS:

.searchandfilter[data-sf-form-id="2062"] li.sf-field-search label::after {
  font-family: FontAwesome;
  font-size: 24px;
  font-weight: normal;
  font-style: normal;
  content: "\f002";
  display: inline-block;
  width: 45px;
  height: 45px;
  line-height: 45px;
  text-align: center;
  color: #fff;
  background: #000;
  position: relative;
  top: 3px;
  cursor: pointer;
 }