Format question

Anonymous

#221306

I just downloaded S&F Pro and like what I see. However, so far I have not been able to control the format of the search boxes. For example, I would like to be able to make the spaces between the search dropdowns tighter, and make the entire search area smaller. I did a screen capture to show you – but I see that I can’t attach a jpg. Am I missing something basic?

BTW: I had the free version and I see that while it is “activated” when the pro version is also activated, the free version does not appear anymore on my site. Is this normal?

Thanks.

…Matt

Trevor

#221332

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.

[Author]

Posts