Dropdown list not displaying correctly on Android mobile – HTML & CSS – SitePoint Forums

Hi I have a wordpress website floralpal.org. The home page has the following code for selecting a 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 displays fine.

But this is what I see on my mobile:

I would be grateful if someone could point me where to look for the problem
thank you

Not enough information was provided to diagnose the problem. What is the CSS for the dropdown format?

Sorry, 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;}
}

Here’s the F12 mobile view:

Thanks for your help

I think that’s the default look of that element on mobile (except perhaps with rounded corners). I don’t have an Android device, but my iOS display is somewhat similar.

I’m using the plugin of choice, but I don’t think it has ios and android support.

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

• What browsers are supported?

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

Thanks for this Paul.
I’m a bit confused – I don’t think disabling selected plugins is the cause of the problem, but I still have the same problem.
This blog seems to suggest that dropdown autocomplete works in mobie .

Are there any frameworks that address this issue? Would you like to select the autocomplete option on your mobile keyboard?

As I understand the plugin is already disabled on mobile so I just get the default one.

What you are seeing is the device’s native controls.

I think you should either not use form elements or instead look for custom dropdowns to replace regular elements.

Could be something like a select2 plugin that seems to work on mobile.

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

hi i am trying to use select2
Here is 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 js:

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

This just displays a scrollable list, but I also want an input box so that I can start typing and get a list of autocomplete results. Please tell me how to add an input box. Any help would be greatly appreciated.

Did you mean something like this old codepen of mine.

(actually it was an old demo of how to remove mobile selection)

thanks paul,
Yes, I want a list, but I also want an input box where I can start typing an item and have it autocomplete. Type w to jump to Wyoming in the list. I want this feature on mobile devices too.
Thanks for your help

It’s basically already doing that, but in a different (better) way. I think it’s better than autocomplete.

I don’t know select2 well enough to know if there are other ways to set it. I have always used the form above.

Be cautious about using non-native controls on mobile, but in my example, just remove the match media and it will work on those devices.Most devices have their own version selection and I don’t want to mess around with them because they provide the best way natively However, I can confirm that my new example works well on ios.

If none of the above are suitable, maybe this could be a JS forum question?

As you start typing the input, the closest match is highlighted and moved to the top of the selection…

I can’t type the input in the codepen example. Clicking on the input box opens the list and displays item 4 – item 7.

I am using it in Chrome.

thank you

sorry paul,
I didn’t check the “it works” link. It looks great on desktop and mobile.
I’m finally making progress – it’s been a long time!
thank you very much.

Paul, any suggestions on how to limit the search to start only at the first character of the string and not match all occurrences?

thank you

Hi Paul, I finally have a working select2 list (with the help of this guy). Here is the final code:

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 do I move forward when I don’t know which way I’m facing? (Lennon)

Thank you for posting your solution.