Dropdown list displays incorrectly on android mobile

[rambleon]

Hi I have a wordpress website - florapal.org - with the following code on the home page for a select dropdown list.

         <select id="bot-name" class="chosen-select" required onchange="window.location.href=this.value" name="wpv-botanical-name">
            <option type="text" list="botNm" value="" disabled selected hidden>Select botanical name from list</option><br/>
               <datalist id="botNm">
                  [xyz-ihs snippet="select-options-botanical-name"]
               </datalist>  
        </select>

When I use F12 mobile view it appears fine.

but this is what I see on my mobile:

Appreciate if someone could tell me where to look for the problem
Thanks

[WebSteve]

You did not provide enough information for us to diagnose the problem. What is your CSS for the dropdown formation?

[rambleon]

Apologies, the html:

<div class="container">	
  <div class="grid">
  	<div class="select-name">
      <h1 class="sub-ttl">
        Search Plants by:
      </h1> 
      <label style="margin-bottom: -10px" for="wpv-botanical-name">Botanical Name<br/><span style="font-size: 0.8rem;">Click, start typing name, or scroll to plant</span></label>
         <select list="botNm" id="bot-name" class="chosen-select" required onchange="window.location.href=this.value" name="wpv-botanical-name">
            <option type="text" value="" disabled selected hidden>Select botanical name from list</option><br/>
               <datalist id="botNm">
                  [xyz-ihs snippet="select-options-botanical-name"]
               </datalist>  
        </select>

css:

body { font-size: calc(1em + 1vw)}
/*
body {overflow: hidden;}
*/
div.container {  
       padding-bottom: 2vh}
.grid {display: grid;
    /*   margin-top: -8vh;  */
       grid-template-columns: 1fr 2fr 1fr;
       grid-auto-rows: auto;
        grid-gap: 20px;
        grid-template-areas:
         "select-name artcl vert-gallery"
       }
.select-name select
       {border-radius: 10px;
        width: 95%;
        font-size: 1rem;
       margin-bottom: 2vh;  
        margin-left: 2vw;}
.container .grid .select-name select
       {font-size: 24px;
        margin-top: -8px;  
        min-height: 30px }
.select-name {grid-area: select-name;
           }
.container{
  margin: 0 auto;
  max-width: 100%;
  width: 100vw;
     }
select.chosen-select {margin-top: -8px;}
  @media screen 
  and (min-device-width: 370px) 
  and (max-device-width: 992px) 
 { 
    .container {width: 100vw;
                height: auto;
               }
    .grid {display: grid;
         width: 100vw;
       padding-top: 50px;
       grid-template-columns: 1fr 1fr;
       grid-template-rows: auto; /* 0.8fr 1fr 3fr;  */
        grid-template-areas:
         "select-name search-use"
         "artcl artcl"
      }
select.chosen-select {max-width: 40vw;
                 max-height: 1vh;}
}

and here’s the F12 mobile view:

Thanks for your help

[PaulOB]

@rambleon

but this is what I see on my mobile:

I believe that’s the default look of that element on mobile (except you probably rounded the corners). I don’t have an android device but my ios display is somewhat similar.

You are using the chosen plugin and I don’t believe there is support for ios and android.

https://harvesthq.github.io/chosen/

• What browsers are supported?

All modern desktop browsers are supported (Firefox, Chrome, Safari and IE9). Legacy support for IE8 is also enabled. Chosen is disabled on iPhone, iPod Touch, and Android mobile devices (more information).

[rambleon]

Thanks for this Paul.
I’m a little confused - I don’t think the chosen plugin is the problem cause if I disable it, I still have the same problem.
This blog seems to suggest that the dropdown autocomplete works on mobie - what am I missing?

[rambleon]

Is there a framework that addresses this issue ie. select option autocomplete with keyboard on mobile?

[PaulOB]

@rambleon

Thanks for this Paul.
I’m a little confused - I don’t think the chosen plugin is the problem cause if I disable it, I still have the same problem.

As I understand it the plug-in is already disabled on mobile so you just get the default whatever.

What you are seeing is the device’s native control either way.

I think you’d need to look for a custom drop-down that doesn’t use form elements or swaps them out for normal elements instead.

Maybe something like the select2 plugin which seems to work on mobile.

Basic usage | Select2 - The jQuery replacement for select boxes

[rambleon]

ok, thanks I’ll give select2 a try and let you know.

[rambleon]

Hi, Trying to use select2
Here’s the code:

<select id="bot-name" class="js-select2" required onchange="window.location.href=this.value" size="5" name="wpv-botanical-name"> 
      
            <option value="" disabled selected hidden>Select plant from list</option><br/>
                  [xyz-ihs snippet="select-options-botanical-name"]
        </select>

and the js:

$(document).ready(function() {
    $('.js-select').select2({
      allowClear: true,
      minimumInputLength: 0,
  placeholder: "Start typing or scroll to name",
  width: '100%'
    });
});

This only gives me a scrollable list, but I also need an input box so I can start typing and get a list of autocomplete results. Please could you show me how to add input box. Any help much appreciated.

[PaulOB]

Did you mean something like this old codepen of mine.

(It was actually an old demo of how to remove the select for mobile)

[rambleon]

Thanks Paul,
Yes I need a list, but also need input box to be able to start entering the item and have it autocomplete, so entering w will jump to Wyoming in your list. Would also like this functionality on mobile device.
Thanks for your help

[PaulOB]

@rambleon

Yes I need a list, but also need input box to be able to start entering the item and have it autocomplete,

It basically does that already but in a different (better) way.You can start typing in the input and then the closest match will be highlighted and moved to the top of the select so you can select it easily. I think that’s better than autocomplete.

I don’t really know the select2 well enough to know if there are other ways to set it up. I’ve always used it in that format above.

I would be wary of using any non native controls on mobile but in my example you just remove the match media and it will work in those devices. Most devices have their own versions of selects and offer the best method natively so I would be loathe to mess around with them However I can confirm that my new example is working well on ios.

If none of the above is suitable then this may be a question for the JS forum now perhaps?

[rambleon]

You can start typing in the input and then the closest match will be highlighted and moved to the top of the select…

I’m unable to type any input into your codepen example, if I click in the input box then the list opens showing Item 4 - Item 7.

I’m using in Chrome.

Thanks

[rambleon]

Apologies Paul,
Didn’t check the “it will work” link. Looks good on desktop and mobile.
I’m finally making progress - it’s been a while!
Thanks, much appreciated.

[rambleon]

Paul, do you have any suggestions how I can limit the search to only start at first character in the string and not match all occurrences.

Thanks

[rambleon]

Hi Paul, Finally have a working select2 list (with this guy’s help), here’s the code I ended up with:

jQuery(document).ready(function($) {
function matchCustom(params, data) {
    // If there are no search terms, return all of the data
    if ($.trim(params.term) === '') {
      return data;
    }
  // Do not display the item if there is no 'text' property
    if (typeof data.text === 'undefined') {
      return null;
    }

    // `params.term` should be the term that is used for searching
    // `data.text` is the text that is displayed for the data object
   //  This sets search to string start and converts (ignores) case
    if  (data.text.toLowerCase().indexOf(params.term.toLowerCase()) === 0) {
      var modifiedData = $.extend({}, data, true);
      modifiedData.text += ' (matched)';

      // You can return modified objects from here
      // This includes matching the `children` how you want in nested data sets
      return modifiedData;
    }

    // Return `null` if the term should not be displayed
    return null;
}

$(".js-select2").select2({
  matcher: matchCustom
});
});

Thanks for pointing me in the right direction.
How can I go forward if I don’t know which way I’m facing? (Lennon)

[PaulOB]

Glad you got it sorted and thanks for posting the solution.