Recommendation for selection that works both on mobile and desktop

[TracySchloss]

I have a dropdown of county names.  I have tried a variety of different options, but it seems like everything I try works for either desktop or mobile, but not both.  The closest I could come was the a dijit/form/DataList in conjunction with a dojox/mobile/comboBox.  At least this displays both on the desktop as well as mobile.

The problem is that the users don't like this behavior on the desktop.  Rather than having a dropdown arrow or scrollbar they can use to see the names further down the list, they have to know to use the upward stroke/flicking motion more commonly associated with mobile.  They don't like this.

This starts out with a query screen and only loads the map if the user chooses to display it.  We have a mandate for everything to be mobile friendly.  In this case, the desktop experience is suffering. 

Vaccines for Children Providers

[KellyHutchins]

What about just using the HTML select tag? I'm not sure what the behavior is on Android but on iOS the HTML select tag displays using the drum/wheel when viewed on an iphone.

Here's a test page using your app that you can use to see how this works:

Vaccines for Children Providers

[TracySchloss]

I feel like I've tried every option, but when I first wrote this, the agency was still at IE 8, and I was having issues with many things that worked just fine in the other browsers.  "Just use Chrome" is not an acceptable workaround for my users, because the state standard is IE.

I have also found that the emulators don't always emulate, for components like this in particular.  It might not work on the emulators, but still on a particular device and vice versa.

The agency has updated to IE 9 this past winter, so maybe if I go back to the generic HTML select, it will work now.

[DavidColey]

Hi Tracy-

Here is something that might help you:  I've got a global var set outside my define or require to account for whether or not the app is being accessed by a mobile or desktop os:

var isMobile = {
  Android: function() {
        return navigator.userAgent.match(/Android/i);
    },
    BlackBerry: function() {
        return navigator.userAgent.match(/BlackBerry/i);
    },
  iOS: function() {
     return navigator.userAgent.match(/iPhone|iPad|iPod/i);
  },
  Opera: function() {
      return navigator.userAgent.match(/Opera Mini/i);
  },
  Windows: function() {
      return navigator.userAgent.match(/IEMobile/i);
  },
  any: function() {
      return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
  }
};

Then inside my ready function I setup a conditional:

if (isMobile.any()){
    document.getElementById("locate_form").style.visibility= "visible"; //hidden test condtion switcher//
    } else{
    document.getElementById("locate_form").style.visibility= "hidden"; //visible test condtion switcher//
    }

and then the dom element "locate_form" visibility property then hides or displays the dijit or control.  In this case, I am hiding or displaying the geolocate button based on the OS detected:

<div id="cpCenter" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'center'">
     <div id="divSearch"></div>
      <form id="locate_form">
          <div id="LocateButton"></div>
     </form>
</div>

I understand that this is not the most elegent method and is somewhat of a quick and dirty mediaQuery, but it does work and i would think it should be fairly easy to swap out say a dojo FilteringSelect with a dojox element.  It's actually something I want to try next-

I have also used this method for controlling snapping using the snapping manager here

Syntax Help: If else containing constructor options

with a little assistance from Robert Scheitlin, GISP

Hope this helps

David

[TracySchloss]

Kelly, Is there somewhere else you could post the example you made?  I'm just now getting back to this, and your link is getting blocked by our cybersecurity.  When I contacted our security team, asking to have it unblocked, I was told 'no', since all personal network storage requests are routinely blocked.

[KellyHutchins · Accepted solution]

I've attached a zipped version of the code.

[TracySchloss]

Thanks,  that will give me something to dig into. 

[ChrisSergent]

Have you ever tried using jQuery? I have an application that has a JavaScript file that allows for jQuery desktop to be used on mobile devices. The file that I use to do this is located at: gisWeb/js at master · csergent45/gisWeb · GitHub  The file name is jquery-ui.touch-punch.js   You just need to add jQuery and this file to your project and then you can use jQuery desktop on mobile devices and they look the same on both. Just an option if you would like to try it.

[TracySchloss]

There was a little issue with the style that Kelly sent, one of the widths on the select style was too wide, completely covering up the dropdown arrow.  Otherwise it works for me and also in the emulators I tried.  I don't expect much mobile use of this particular map, the subject matter is pretty obscure.