Made progress with your tutorials on styling select2, but IOS shows up briefly?

Anonymous

#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

#202194

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

Anonymous

#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?

Anonymous

#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

#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.

Anonymous

#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

#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/

Anonymous

#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

#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.

Anonymous

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

[Author]

Posts