Support Forums

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

Forums Forums Search & Filter Pro Made progress with your tutorials on styling select2, but IOS shows up briefly?

Tagged: 

Viewing 10 posts - 1 through 10 (of 15 total)
  • Christian Thorne
    #202183

    Hello,

    I searched for how to style the dropdown menu, I found several really good posts, and I’m up and away styling the menu,,, so thanks for the tutorials.

    Just one question, when I click on the on the menu, on IOS (iPad) their native menu shows up for about half a second.. I am assuming your plugin uses JS to supress this?

    Do you know if there is a way to completely stop it from showing?

    Thanks,
    Christian

    Trevor Moderator
    #202194

    It does, yes. I am not sure how you can get around delays caused by this.

    Christian Thorne
    #202200

    Okay, I’ll do some research.. Could you help me out with the right terminology to use.

    I’m not sure exactly what to search for, “delay in JS activating on IOS” etc?

    Christian Thorne
    #202208

    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 Moderator
    #202238

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

    It hides the standard select and replaces it with HTML that LOOKS like a select, but is actually a DIV structure (making it easier to style).

    The standard S&F CSS file always has that CSS in, so you can write you own to over write it, as shown.

    Christian Thorne
    #202248

    Thanks Trevor… Okay so just by adding/activating the select2 script on your plugin with this;

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

    it hides the standard select and replaces it with HTML?!

    At the moment it’s showing both the standard select and the html DIV structure,, I have to click it again for the IOS select menu to dissapear, any ideas why this is happening?

    Do you know if I could add the jQuery script manually to disable/hide the select menu?

    Trevor Moderator
    #202250

    It should hide it already. I wonder if the advice in this post might help both issues:

    https://xomino.com/2014/10/28/using-jquery-when-to-trigger-a-screen-update-after-select2-has-loaded/

    Christian Thorne
    #202318

    Thanks Trevor, this was just what I was looking for.

    When it “says hide all the form fields with a <STYLE> on the main section”, do you think it would work if I added a class to all my select2 code (in child theme), then added visibility: hidden;?

    Trevor Moderator
    #202325

    I think it means hide all the S&F original fields. Don’t need to add a class, they all have classes you can use on the LI elements. The advantage of using either visibility OR opacity is that the space they need still remains.

    Christian Thorne
    #202331

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

Viewing 10 posts - 1 through 10 (of 15 total)

You must be logged in to reply to this topic.