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: select2
- This topic has 14 replies, 2 voices, and was last updated 5 years, 1 month ago by Trevor.
-
Christian Thorne(Private) February 13, 2019 at 10:37 pm #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,
ChristianTrevor Moderator(Private) February 14, 2019 at 7:29 am #202194It does, yes. I am not sure how you can get around delays caused by this.
Christian Thorne(Private) February 14, 2019 at 8:07 am #202200Okay, 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(Private) February 14, 2019 at 10:55 am #202208I’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(Private) February 14, 2019 at 12:57 pm #202238So 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(Private) February 14, 2019 at 1:19 pm #202248Thanks 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(Private) February 14, 2019 at 1:22 pm #202250It 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(Private) February 14, 2019 at 9:03 pm #202318Thanks 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(Private) February 15, 2019 at 8:10 am #202325I 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(Private) February 15, 2019 at 9:28 am #202331I 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’})
}); -
AuthorPosts
You must be logged in to reply to this topic.