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

Anonymous

#272854

Hi
Urgent deadline to finish this project today so any guidance here is appreciated so much thank you.

We have switch to the Select2 drop downs and thanks for that as allowed us to style them better on mac.

When we choose an option from the dropdown and ajax filtering or pagination activates we then lose some of the css styling we applied to them such as we changed the drop down right side trigger V arrow and some padding. Any ideas what we are doing wrong.

Also now on iOs iphone when we click on a select drop down we see both types.. the actual drop down shows as you would expect but iphone also shows its own native select scroll list over the top which is confusing. Any way to disable that or the visual drop down on phones?

THANK YOU – happy to pay for help on this… 😉

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

[Author]

Posts