Select2 css styling lost after we select and option from drop down or paginate

Trevor

#272858

Are you adding this styling using JavaScript (when the page loads), or a CSS stylesheet?

Trevor

#272860

So, if you are using JavaScript, which your description suggests might be the case, you need to reapply it each time our Ajax triggers. So, for when the Auto Update triggers, or when the form is submitted.

Thus, you might need some additional JavaScript, like this:

<script>(function ( $ ) {
  "use strict";
  $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
    // call your script or function here
  });
}(jQuery));</script>

<script>(function ( $ ) {
  "use strict";
  $(document).on("sf:ajaxformfinish", ".searchandfilter", function(){
    // call your script or function here
  });
}(jQuery));</script>

Anonymous

#272862

Hi Trevor

Thanks for quick reply…

I just have this script in the page…. the other css styling seems to be fine so you are right it must be this script that needs adapting as it appends our fontawesome icon?

and any idea about mobile? how to stop it shoing drop down options PLUS ios way of choosing options?

<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});

jQuery(‘b[role=”presentation”]’).hide();
jQuery(‘.select2-selection__arrow’).append(‘<i class=”fas fa-angle-down”></i>’);

});

</script>

Trevor

#272866

You mean that on iOS devices you get the dropdown AND the bit at the bottom of the screen to select? I don’t know how you can avoid this, sorry.

Anonymous

#272868

Trevor thank you so much

I just needed to copy that chunk below again in to the $(document).on(“sf:ajaxfinish”, “.searchandfilter”, function()

jQuery(‘b[role=”presentation”]’).hide();
jQuery(‘.select2-selection__arrow’).append(‘<i class=”fas fa-angle-down”></i>’);

That works now… 🙂 phew one item off my snaglists for launch….

a) don’t worry about the iOS question that’s fine.

b) last quick query…. I’ve now enabled infinite scrolling which works fine for me even if i leave those two optional fields blank…

Any guidance on how to change the loading icon… cant see anything in this ref here https://searchandfilter.com/documentation/search-results/infinite-scroll/

Cheers again and a great plugin

Really saved me with this project 🙂

Trevor

#272875

Our loader icon is a simple addition to the page, so you may need to use some Custom CSS, or actually hide it entirely and make your own. Please see these two posts (from the same thread);

https://support.searchandfilter.com/forums/topic/search-filter-scroll-loading-icon-positionning-in-infinite-scroll/page/2/#post-127324

https://support.searchandfilter.com/forums/topic/search-filter-scroll-loading-icon-positionning-in-infinite-scroll/page/3/#post-128735

This third party blog post might also give you some ideas:

https://wpbeaches.com/adding-a-loading-icon-spinner-on-search-filter-pro-archive-page/

Anonymous

#273339

This reply has been marked as private.

Trevor

#273362

Our Elementor extension doesn’t officially support Infinite Scroll (it is something we plan for later this year), and the selection of the correct settings is difficult, and not always possible.

I am sorry, but what you are seeing is caused by this, and there is no easy fix, except to use numbered pagination for now.

Anonymous

#273377

OK thanks for letting me know Trevor

Look forward to seeing this in future updates

have a good evening
Jonathan

Trevor

#273379

Thanks for getting back to me. I will close this thread for now.

[Author]

Posts