topic dijit/form/filteringselect on mobile device in ArcGIS JavaScript Maps SDK Questions

dijit/form/filteringselect on mobile device

TracySchloss — Fri, 10 Dec 2021 20:14:45 GMT

I'm attempting to use just the compact build and use all dojox/mobile type components. I needed a dropdown list of county names and I wanted to have something that was fairly small that didn't take up the whole screen. On other projects, I wasn't using the compact build and everything styled fine. When I tried to use a dijit/form/FilteringSelect in this paired down version, instead of having a nice dropdown arrow next to my choices, I ended up with some strange styling.
[ATTACH=CONFIG]32920[/ATTACH]

Instead of trying to switch to the full version of the API, I switched to using a dojox/mobile/combobox. This has the option to allow the user to enter something into the input field as well as pick from the dropdown. The problem with this is that sometimes to keyboard that pops up on a phone will dismiss cleanly, showing your results, but other time it continues to leave a blank spot on the screen where the keyboard used to be.

   <select data-dojo-type="dijit/form/DataList" data-dojo-props="id:'countyList'">
                            <option selected>Adair</option>
                            <option>Andrew</option>
                            <option>Atchison</option>
                            <option>Audrain</option>
                            <option>Barry</option>
                            <option>Barton</option>
                            <option>Bates</option>
                            <option>Benton</option>
                            <option>Bollinger</option>
                            <option>Boone</option>
                            <option>Buchanan</option>
                            <option>Butler</option>
                            <option>Caldwell</option>
                            <option>Callaway</option>
 </select>
                        <input id="countySelect" type="text" data-dojo-type="dojox/mobile/ComboBox" data-dojo-props="list:'countyList'" placeHolder="Select a county" />

Should I have just stuck with my FilteringSelect and loaded the full version of the API? Is there something I could have done to have just loaded what I needed for FilteringSelect? Doing a require for "dijit/form/FilteringSelect" obviously wasn't enough, because the style was completely wonky.

http://gis.dhss.mo.gov/Website/VFC/index.html

Re: dijit/form/filteringselect on mobile device

TracySchloss — Fri, 10 Dec 2021 20:14:48 GMT

In the end, I added the claro style sheet and that seems to have helped.

        <link type="text/css" rel="stylesheet" href="https://js.arcgis.com/3.8/js/dojo/dijit/themes/claro/claro.css">

Our tests using filteringselect on mobile devices has not been good. The only combination for generating a dropdown that works on a phone as been the combination I described in my first posting, dijit/form/DataList and dojox/mobile/ComboBox. I tried using the standard ComboBox dijit/form/ComboBox, but that doesn't look to scroll correctly on a phone.

It still doesn't have the dropdown arrow I think it should have. FilteringSelect automatically adds one, but ComboBox does not.

Re: dijit/form/filteringselect on mobile device

TracySchloss — Fri, 10 Dec 2021 20:14:51 GMT

I found a suggestion for adding a dropdown arrow. It involved adding a class to the input and then styling it was an arrow shaped background image.


HTML
 <input id="countySelect" type="text"  class="combo-select"  data-dojo-type="dojox/mobile/ComboBox" data-dojo-props="list:'countyList'" placeHolder="Select a county" maxHeight="350" />

CSS
.combo-select {
   background-image: url('../images/dropdown_arrow_black.png');
   background-repeat: no-repeat;
   background-position: right center;
   padding-right: 10px;
 }