Drop-down menu not working in Safari

Trevor

#221867

Category has a scroll because that is what select boxes do when there a lot of options. The others do not because of the small number of options. This is normal behavior for select boxes. Otherwise the drop list can end up being far too long.

Anonymous

#222292

That is a shame, we are back to the original problem then 🙁

While with your CSS help using Select boxes do appear nicer, it is still not as aesthetically pleasing as the original version, and as this is the primary page for the website, looking simple and sleek is key.

Is there an alternative option to not use these select boxes but the search still functioning on Safari? Or worse case, can I make the display conditional so that only Safari users will see the Select boxes?

Thanks!

Trevor

#222394

From within our plugin, some tweaks can be made to the Select2 CSS, but functionally it is as it is.

As we are here applying a script not normally applied in this way, you could look for alternative jQuery select scripts, but my experience is that many are very old and abandoned, as Select2 has become the defacto standard for WordPress.

I am not sure it is Safari that is the issue, but iOS, combined with something else in your theme. Out of the box, our standard usage of selects works fine with Apple devices and Safari, but the styling is determined by the user settings on the local device and in iOS and Safari, over which you have no control.

There is not a way to target to exclude Safari.

Is it that the look (style/CSS) needs more adjustment?

Anonymous

#222752

Thank you Trevor, I really appreciate the time you have taken to help resolve this! I’m assuming it is Divi (and the additional code that was needed) that made Safari on HighSierra bonk (Safari on non-laptops appear to work). FYI – Looking at the error produced it appears to be related to failed due to access control checks (not allowed by Access-Control-Allow-Origin).

I’ll go ahead to switch to the Select2 version, but is there any way to set the limit for when a drop-down menu should start to display a scroll or not? That is, I would like all dropdowns to appear the same, and Categories (with its 7 options) not to display a scroll. Possible with CSS tweaks, or coding job?

Trevor

#222758

This reply has been marked as private.

Anonymous

#222760

Please, no stress (won’t be able to make the change until the end of the week anyway) and thanks again for all this help!

Trevor

#222875

Can you see if this modified code works?

<script>
(function ( $ ) {
  $(document).on("sf:ajaxfinish", ".searchandfilter", function(){
    $('select.sf-input-select').select2({minimumResultsForSearch: -1});
    $('select.sf-input-select').attr("size",$("'select.sf-input-select' option").length);
  });
}(jQuery));
jQuery(document).ready(function($){
  $('select.sf-input-select').select2({minimumResultsForSearch: -1});
    $('select.sf-input-select').attr("size",$("'select.sf-input-select' option").length);
});
</script>

Anonymous

#222959

I don’t know if to laugh or cry, but the original dropdowns now work on Safari/iOS. There have not been any updates made on the code/page, theme/plugins or browser, so assuming it is something to do with the Access control issue that no longer appeared (possibly fixed by WP or host).
Thank you again and now I have an alternative if the issue reappears!

Trevor

#222962

Great. Is it OK to close this thread for now?

Anonymous

#223018

Yes, please do. And if I found out what exactly caused it, I’ll share it with you in case any other customer experience the same.

Thank you, Hanna

[Author]

Posts