Support Forums

The forums are closed and will be removed when we launch our new site.

Looking for support? You can access the support system via your account.

Forums › Forums › Search & Filter Pro › Select2 css styling lost after we select and option from drop down or paginate

Viewing 10 posts - 1 through 10 (of 11 total)
1 2
  • Jonathan Appleton
    (Private)  January 15, 2021 at 9:38 am #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 Moderator
    (Private)  January 15, 2021 at 10:01 am #272858

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

    Trevor Moderator
    (Private)  January 15, 2021 at 10:04 am #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>
    Jonathan Appleton
    (Private)  January 15, 2021 at 10:12 am #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 Moderator
    (Private)  January 15, 2021 at 10:13 am #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.

    Jonathan Appleton
    (Private)  January 15, 2021 at 10:34 am #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 Moderator
    (Private)  January 15, 2021 at 12:05 pm #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/

    Jonathan Appleton
    (Private)  January 20, 2021 at 4:19 pm #273339
    This reply has been marked as private.
    Trevor Moderator
    (Private)  January 20, 2021 at 5:08 pm #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.

    Jonathan Appleton
    (Private)  January 20, 2021 at 5:41 pm #273377

    OK thanks for letting me know Trevor

    Look forward to seeing this in future updates

    have a good evening
    Jonathan

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 11 total)
1 2

The topic ‘Select2 css styling lost after we select and option from drop down or paginate’ is closed to new replies.