topic Re: no dropdown arrow in combo box in ArcGIS JavaScript Maps SDK Questions

no dropdown arrow in combo box

deleted-user-ugCMpXci8bn5 — Mon, 06 Aug 2012 15:24:13 GMT

Hello, I hope this is a simple problem I am overlooking...

I am trying to create a combo box with hardcoded values. What I get is a text box that does not have an arrow or drop-down functionality (the auto complete does function).

Here is what I have in the HTML (based on examples from ESRI):

            <select id="boroughSelect" dojotype="dijit.form.ComboBox"
                autoComplete="true"
                forceValidOption="false"
                onchange="executeMenuQuery(this)">

                <option>Manhattan</option>
                <option>Brooklyn</option>
                <option>Bronx</option>
                <option>Staten Island</option>
                <option>Queens</option>

            </select>

This seems like it should be pretty easy, can someone tell me what I am missing?
Thanks, Jason F.

Re: no dropdown arrow in combo box

KellyHutchins — Mon, 06 Aug 2012 16:03:01 GMT

I pasted your code into a sample app and it worked for me.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html>          <head>         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">         <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />         <!--The viewport meta tag is used to improve the presentation and behavior         of the samples on iOS devices-->         <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"         />         <title>Topographic Map</title>         <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.1/js/dojo/dijit/themes/claro/claro.css">         <style>             html, body {                 height: 100%;                 width: 100%;                 margin: 0;                 padding: 0;             }             .esriScalebar {                 padding: 20px 20px;             }             #map {                 padding:0;             }         </style>         <script type="text/javascript">             var djConfig = {                 parseOnLoad: true             };         </script>         <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.1"></script>         <script type="text/javascript">             dojo.require("dijit.layout.BorderContainer");             dojo.require("dijit.layout.ContentPane");             dojo.require("esri.map");             dojo.require("dijit.form.ComboBox");               var map;              function init() {                 var initExtent = new esri.geometry.Extent({                     "xmin": -122.46,                     "ymin": 37.73,                     "xmax": -122.36,                     "ymax": 37.77,                     "spatialReference": {                         "wkid": 4326                     }                 });                 map = new esri.Map("map", {                     extent: esri.geometry.geographicToWebMercator(initExtent)                 });                 //Add the topographic layer to the map. View the ArcGIS Online site for services http://arcgisonline/home/search.html?t=content&f=typekeywords:service                     var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer");                 map.addLayer(basemap);                  dojo.connect(map, 'onLoad', function (theMap) {                     //resize the map when the browser resizes                     dojo.connect(dijit.byId('map'), 'resize', map, map.resize);                 });             }              dojo.addOnLoad(init);         </script>     </head>          <body class="claro">         <div dojotype="dijit.layout.BorderContainer" design="headline" gutters="false"         style="width: 100%; height: 100%; margin: 0;">             <div id='lp' dojotype='dijit.layout.ContentPane' region='left' style='width:300px;'>                 <select id="boroughSelect" dojotype="dijit.form.ComboBox" autoComplete="true"                 forceValidOption="false" onchange="executeMenuQuery(this)">                     <option>Manhattan</option>                     <option>Brooklyn</option>                     <option>Bronx</option>                     <option>Staten Island</option>                     <option>Queens</option>                 </select>             </div>             <div id="map" dojotype="dijit.layout.ContentPane" region="center" style="border:1px solid #000;padding:0;"></div>         </div>     </body>  </html>

Re: no dropdown arrow in combo box

deleted-user-ugCMpXci8bn5 — Mon, 06 Aug 2012 16:30:50 GMT

Thanks for the quick reply.
Well, mine is not working. There is too much code to copy the whole thing, but I see there are multiple apis referenced in the script I am working on (it is written in an MVC 3 framework in Visual Studio).

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dijit/themes/claro/claro.css">
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.6/js/dojo/dijit/themes/tundra/tundra.css">
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.8/js/dojo/dojox/grid/resources/Grid.css">
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.8/js/dojo/dojox/grid/resources/claroGrid.css">
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.8/js/dojo/dojox/image/resources/image.css">

Could this be the source of the problem?

Re: no dropdown arrow in combo box

KellyHutchins — Sun, 12 Dec 2021 07:34:38 GMT

Try updating your stylesheets to match the version of the api. For example it looks like you have some stylesheets pointing to 2.8 and others to 1.5 and 1.6. Are you using claro or tundra in your app? If you are using claro you can remove the line that references tundra.css and vice-versa.

If you are using claro try replacing the current references in your app with the code below. If you aren't using the latest version (3.1) replace it with the version number you are using.

<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.1/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.1/js/dojo/dojox/grid/resources/Grid.css">
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.1/js/dojo/dojox/grid/resources/claroGrid.css">
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.1/js/dojo/dojox/image/resources/image.css">

Re: no dropdown arrow in combo box

deleted-user-ugCMpXci8bn5 — Mon, 06 Aug 2012 16:45:05 GMT

Thanks again.

I replaced the api calls with your code. Now the combo box does have an arrow, but the list of options does not drop down (clicking the arrow doesn't do anything). The auto complete still works.

If I remove 'dojotype="dijit.form.ComboBox' from the HTML, I get a drop down list of options, but w/o any auto complete functionality, which is needed for this task.

Any more ideas? Thanks, Jason

Re: no dropdown arrow in combo box

KellyHutchins — Sun, 12 Dec 2021 07:34:41 GMT

Do you include the dojo parser? Look for something in your app like this:

        <script type="text/javascript">
            var djConfig = {
                parseOnLoad: true
            };
        </script>
        <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.1"></script>

Setting parseOnLoad to true runs the dojo parser when the page loads.

Re: no dropdown arrow in combo box

deleted-user-ugCMpXci8bn5 — Mon, 06 Aug 2012 16:57:48 GMT

yes, those exact lines are in the file right before the api links...

the existing app has other functionality that works (navigation bar, a simple layer list w/ checkboxes)....although it is written in an MVC 3 platform, the general layout of the code is pretty similar to a typical javascript/css/html framework (so far)

Re: no dropdown arrow in combo box

KellyHutchins — Mon, 06 Aug 2012 17:06:32 GMT

Are there any errors in the debugging console (Firebug or Chrome Dev Tools) when you run the app?

The easiest way to debug/test this might be to pull the relevant lines from your app and make a simple test page to see if you can repro the problem.

Re: no dropdown arrow in combo box

deleted-user-ugCMpXci8bn5 — Mon, 06 Aug 2012 18:39:00 GMT

Thanks for your patience...

I am not very familiar with Firebug..but when I check 'console/errors'..there are several errors of this type:

"NetworkError: 407 Proxy Authenticatio...xy filter is denied. ) - http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.1"

..there is one of these errors for every api call (the ones you listed above), and several more for many of the dojo/dijit tools, including the Combo Box...

I notice that the HTML for the ComboBox lists autocomplete as 'off' although it is 'on' in the code:

<div class="dijitReset dijitInputField dijitInputContainer">
<input id="boroughSelect" class="dijitReset dijitInputInner" type="text" waistate="haspopup-true,autocomplete-list" wairole="textbox" dojoattachpoint="textbox,focusNode" dojoattachevent="onkeypress:_onKeyPress,compositionend" autocomplete="off" role="textbox" aria-haspopup="true" aria-autocomplete="list" aria-invalid="false" tabindex="0" value="Manhattan" aria-owns="boroughSelect_popup">
</div>

I have tried to reproduce the problem, but like you did above, I did not have an issue when creating a drop down combobox in a small separate file..

Re: no dropdown arrow in combo box

deleted-user-ugCMpXci8bn5 — Mon, 06 Aug 2012 18:54:59 GMT

I also noticed that i lose the infoWindow functionality when I switched to v3.1 api. IS there perhaps some new syntax in the new API for infoWindows?

Re: no dropdown arrow in combo box

JohnGravois — Tue, 07 Aug 2012 15:38:14 GMT

i'm not aware of any infoWindow specific changes at 3.1, but some other underlying changes were made at version 3.0 which might be affecting you.

in some cases it is required to load additional modules to maintain functionality compared to an application built using 2.x. since our sample applications are updated each time a new version of the API is released, i've found it helpful to compare a live version which demonstrates some of the same functionality with something I've created previously and look for differences in which modules are loaded.

see the link below for more information:
http://help.arcgis.com/en/webapi/javascript/arcgis/help/jshelp/migration_30.htm

Re: no dropdown arrow in combo box

KellyHutchins — Tue, 07 Aug 2012 16:34:50 GMT

John is correct there weren't any 3.1 changes that should affect the info window. Can you repro the info window issue in a test page or is it only in your larger app?

Re: no dropdown arrow in combo box

deleted-user-ugCMpXci8bn5 — Tue, 07 Aug 2012 16:52:32 GMT

I just went back to 2.1 for now and it (the infoWindow) works..it is part of the larger app.

..but the dropdown menu is still not working..I don't think that the errors related to proxy authentication should be affecting this..? The autocomplete works, and I can enter values that correctly trigger a query (the purpose of the comboBox) but the arrow doesn't work...

Re: no dropdown arrow in combo box

deleted-user-ugCMpXci8bn5 — Wed, 08 Aug 2012 15:42:50 GMT

I think I have found the source of the problem, but I still don't know how to correct it.
I should have stated earlier, the ComboBox is inside of a ContentPane, which is inside of a dijit AccordionContainer. I believe the problem with the ComboBox is related to the Accordion Container.

Re: no dropdown arrow in combo box

KellyHutchins — Sun, 12 Dec 2021 07:34:44 GMT

Is the accordion pane that contains your dropdown visible when the page loads?

I ran a quick test using my simple sample and the dropdown displays well in the accordion pane. Can you modify this simple sample to match your accordion container code and see if that breaks?

        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
        <html>
            
            <head>
                <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
                <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
                <!--The viewport meta tag is used to improve the presentation and behavior
                of the samples on iOS devices-->
                <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"
                />
                <title>Topographic Map</title>
                <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.1/js/dojo/dijit/themes/claro/claro.css">
                <style>
                    html, body {
                        height: 100%;
                        width: 100%;
                        margin: 0;
                        padding: 0;
                    }
                    .esriScalebar {
                        padding: 20px 20px;
                    }
                    #map {
                        padding:0;
                    }
                </style>
                <script type="text/javascript">
                    var djConfig = {
                        parseOnLoad: true
                    };
                </script>
                <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.1"></script>
                <script type="text/javascript">
                    dojo.require("dijit.layout.BorderContainer");
                    dojo.require("dijit.layout.ContentPane");
                    dojo.require("esri.map");
                    dojo.require("dijit.form.ComboBox");
                    dojo.require("dijit.layout.AccordionContainer");

                    var map;

                    function init() {
                        var initExtent = new esri.geometry.Extent({
                            "xmin": -122.46,
                            "ymin": 37.73,
                            "xmax": -122.36,
                            "ymax": 37.77,
                            "spatialReference": {
                                "wkid": 4326
                            }
                        });
                        map = new esri.Map("map", {
                            extent: esri.geometry.geographicToWebMercator(initExtent)
                        });
                        //Add the topographic layer to the map. View the ArcGIS Online site for services http://arcgisonline/home/search.html?t=content&f=typekeywords:service    
                        var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer");
                        map.addLayer(basemap);

                        dojo.connect(map, 'onLoad', function (theMap) {
                            //resize the map when the browser resizes
                            dojo.connect(dijit.byId('map'), 'resize', map, map.resize);
                        });
                    }

                    dojo.addOnLoad(init);
                </script>
            </head>
            
            <body class="claro">
                <div dojotype="dijit.layout.BorderContainer" design="headline" gutters="false"
                style="width: 100%; height: 100%; margin: 0;">
                    <div id='lp' dojotype='dijit.layout.AccordionContainer' region='left' style='width:300px;'>
                        <div dojotype='dijit.layout.ContentPane' title='pane1'>
                            Content for Pane 1
                        </div>
                        <div dojotype='dijit.layout.ContentPane' title='pane 2'>
                            <select id="boroughSelect" dojotype="dijit.form.ComboBox" autoComplete="true"
                            forceValidOption="false" onchange="executeMenuQuery(this)">
                                <option>Manhattan</option>
                                <option>Brooklyn</option>
                                <option>Bronx</option>
                                <option>Staten Island</option>
                                <option>Queens</option>
                            </select>
                    </div>
                    </div>
                    <div id="map" dojotype="dijit.layout.ContentPane" region="center" style="border:1px solid #000;padding:0;"></div>
                </div>
            </body>

        </html>

Re: no dropdown arrow in combo box

deleted-user-ugCMpXci8bn5 — Thu, 09 Aug 2012 16:04:03 GMT

Thanks, I found the source of the error, it was in the css.
I need to change your code to version 2.1 for the map to load properly. Do I need to install an update or do something else so that I can use the 3.1 API?
Thanks for your help, Jason

Re: no dropdown arrow in combo box

KellyHutchins — Thu, 09 Aug 2012 16:30:32 GMT

So if you copy the code I included in the previous post and run it locally it doesn't work unless you use 2.1? Or is it your code that doesn't work at 2.1?

Thanks, I found the source of the error, it was in the css.
I need to change your code to version 2.1 for the map to load properly. Do I need to install an update or do something else so that I can use the 3.1 API?
Thanks for your help, Jason

Re: no dropdown arrow in combo box

deleted-user-ugCMpXci8bn5 — Thu, 09 Aug 2012 18:30:20 GMT

..when I copy your code, it does not work using 3.1...it works when I change it to 2.1 (I haven't tried other versions).

Re: no dropdown arrow in combo box

KellyHutchins — Thu, 09 Aug 2012 18:49:48 GMT

It should work just fine at 3.1 - no changes or updates required. Here's a JSFiddle with the working code:

http://jsfiddle.net/D2feS/1/

Re: no dropdown arrow in combo box

deleted-user-ugCMpXci8bn5 — Mon, 13 Aug 2012 16:56:06 GMT

I tried your code again in Notepad++...with the same result. Using 3.1, I get a mostly blank screen, with the drop down menu in the upper left corner...when i change the JS version to 2.1 the map works fine. Could this be some setting on my local machine or..?
Thanks again for your help.