Search Results for '.searchandfilter custom css'

[Anonymous]

I tried the following but it didn’t work. Although the li where hidden. Do I need to hide them somewhere else, so the jQuery can then change it?

.searchandfilter li { visibility: hidden; } (in custom CSS)

$.when(
$(“select[class*=’select2′]” ).select2({
allowClear: true
})
).done(function(){
$(‘.searchandfilter li’).css({‘visibility’: ‘visible’})
});

I tried this also.

window.jQuery.when(
window.jQuery(“select[class*=’select2′]” ).select2({
allowClear: true
})
).done(function(){
window.jQuery(‘.searchandfilter li’).css({‘visibility’: ‘visible’})
});

[Anonymous]

I’m just trying to get an idea of how your plugin works, so I know I’ve set it up correctly, and then I know what I need to do further.

I’m using the Simple Custom CSS and JS plugin you suggested, and added this;

jQuery(document).ready(function($){
$(‘select.sf-input-select’).select2();
});

So this enable your script, which surpresses/disables the IOS select menu?

I also saw your post with all the select2 styling (https://support.searchandfilter.com/forums/topic/customise-dropdown-combobox/), does this always run and we can modify with custom CSS, or do I need to add any of these myself to a child theme for example?

Thanks

[Trevor]

Ah. THAT is set by the browser. And the code to ‘fix’ it varies according to browser and browser version.

It is better to use the Select2 V4 script and then style that. This post explains how:

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

[Trevor]

You will need to use some custom CSS, like this:

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

[Trevor]

To me, adding this custom CSS, to overcome your theme CSS, looks best:

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

[Trevor]

OK. So, for now, this will need to be an manual setup.

You will need this JavaScript file:

https://www.dropbox.com/s/vuu640lyjga094e/select2multi-checkboxes.js?dl=0

I loaded this file in my theme with this code in my child theme functions.php file (I placed the file in a sub-folder of my child theme called js:

function sandf_checkbox_script() {
  wp_register_script( 'select2-with-checkboxes', get_stylesheet_directory_uri() . '/js/select2multi-checkboxes.js', array('jquery'), '1.0.0', true );
  wp_enqueue_script( 'select2-with-checkboxes' );
}
add_action( 'wp_enqueue_scripts', 'sandf_checkbox_script', 99 );

Lines 81 and 89 will need to be edited. Here is what they look like (the lines with sf-field-taxonomy-download_category in):

jQuery(function($) {
  $('.sf-field-taxonomy-download_category .sf-input-select').select2MultiCheckboxes({
    templateSelection: function(selected, total) {
      return selected.length + " selected of " + total;
    }
  })
});
(function ( $ ) {
  $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
    $('.sf-field-taxonomy-download_category .sf-input-select').select2MultiCheckboxes({
      templateSelection: function(selected, total) {
        return selected.length + " selected of " + total;
      }
    });
  });
}(jQuery));

You need to change these names to whatever your field is called.

You will need some Custom CSS (you may need to make it more specific to the field, but this should work as is):

.select2-results__option .wrap:before{
    font-family: 'Font Awesome\ 5 Free';
    color:#999;
    content:"\f0c8";
    width:25px;
    height:25px;
    padding-right: 10px;
}
.select2-results__option[aria-selected=true] .wrap:before{
    content:"\f14a";
}

You will need an icon font. I have used Font Awesome 5 Free. You may already have one loading to your site. The content numbers and font-family name in the code will need to match whichever icon font and icons you use.

I loaded Font Awesome 5 Free with this code in my child theme functions.php file:

function sandf_add_custom_fa_css() {
  wp_enqueue_style( 'custom-fa', 'https://use.fontawesome.com/releases/v5.6.3/css/all.css' );
}
add_action( 'wp_enqueue_scripts', 'sandf_add_custom_fa_css' );

In the form field settings, the field needs to be set to multi-select AND combobox, and in the plugin settings, the Combobox script needs to be set to Select2.

[Trevor]

Ah. Can you read this post:

https://support.searchandfilter.com/forums/topic/categories-and-subcategories-in-two-different-dropdowns/#post-198819

You have five forms on the page, but should have just one. The five choice types should be each their own custom taxonomy, split out from the one custom taxonomy that you are currently using (portfolio_entries).

With the addition of CSS, that single form can then be made to look how you want it.

[Trevor]

You may want to add the select2 script to the select boxes. First, change the combobox script to select2. In WP Admin -> Search & Filter -> Settings, look for the Combobox script and set that to Select2. Here is a screenshot:

https://www.screencast.com/t/g58SM1O9

Then 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>

You can place this inside a text widget on the page, put the code in an external JavaScript file (enqueued from your child theme functions.php file), or use a plugin to add it, such as:

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

(note that this plugin does not need the script tags).

Then you need to modify the Select2 CSS. 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]

The custom CSS would look like this:

.searchandfilter .sf-field-submit .btn {
  padding: 10px 12px;
  background: #719430;
  border: none;
  border-radius: 0;
  font-family: Lato, sans-serif;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 1px;
  color: #fff;
}
.searchandfilter .sf-field-submit .btn:hover,
.searchandfilter .sf-field-submit .btn:focus {
  background: #5a7726;
}

But you can play with this, yes?

[Anonymous]

Thank you for your promptness in our hour of need!

I am not sure why the images disappear… we had a similar issue before with there appearing excess space after loading ajax, now its less space…

Is there something I need to change in what you sent me last time? Here is what you sent me last time:

“Yes I am using Chrome in Windows. But now I see it. And I think I have a fix:

Add this custom CSS to the theme:

body.sfajax .elementor-380 .elementor-element.elementor-element-6c9e0661 .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>”