nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

no dropdown arrow in combo box

deleted-user-ugCMpXci8bn5

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.

Vind meer berichten getagd met

Accepted answers

khutchins

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>

All comments

MarcoWagemakers3

Hi,

I had the same problem by customizing the ArcGIS Online Basicviewer...

The issue is the code in the Layout.css:

/*change the default arrow used by the basemap dropdown button from black to gray*/
.claro .dijitArrowButtonInner {
background-image: url("../images/buttonArrows.png");
background-position:-152px 53%;
}
/*Use a white arrow for the dropdown*/
.claro .dijitArrowButtonInner {
background-image: url("../images/buttonArrows.png");
background-position:-53px 53% !important;
}

Marco

deleted-user-ugCMpXci8bn5

sorry I meant to include this line:

<script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>

deleted-user-ugCMpXci8bn5

I am trying to implement a locator similar to the one used in the example linked above (although I hope to use it with street intersections for input). The locator service does not work with 2.1, but it does seem to work with 3.1. I am a bit confused by the example; the locator noted in the explanation, TA_Address_NA_10 (and referred to by the parameters in the code) is not the same as the url assigned to the 'locator' variable (WorldLocator).
In any case, the code works for me when I switch to 3.1 but not in 2.1. The problem is that many of my other functions, such as the navigation bar, my infoWindow which appears when clicking on features, and the dropdown menu created by a query, do not work when I switch to 3.1 (as noted above).

Pre-built in the MVC setup (on layout.cshtml) there is this line:

<script src="@Url.Content("~/Scripts/jquery-1.7.2.min.js")" type="text/javascript"></script>

Is it possible that these problems may be related to the MVC framework? I am new to MVC and Javascript (as you may have guessed).
Thanks again, j

khutchins

Aptana has a built-in web server that may allow you to view some samples without installing your own web server but it's a good practice to setup a more robust web server that you can use to test your code and the samples.

What type of issues are you having with the locator sample?

So are you saying I cannot run the examples given by ESRI using Aptana or Notepad++ unless through a web server?

In either case, I have been having trouble using 3.1 running from both localhost (through MVC) and running as a file from an editor. For the most part 2.1 has worked, but now I am having trouble using the locator class (as given in the ESRI example http://help.arcgis.com/en/webapi/javascript/arcgis/help/jssamples_start.htm).

deleted-user-ugCMpXci8bn5

So are you saying I cannot run the examples given by ESRI using Aptana or Notepad++ unless through a web server?

In either case, I have been having trouble using 3.1 running from both localhost (through MVC) and running as a file from an editor. For the most part 2.1 has worked, but now I am having trouble using the locator class (as given in the ESRI example http://help.arcgis.com/en/webapi/javascript/arcgis/help/jssamples_start.htm).

khutchins

Are you running this from your file server (file://) or from the web server (http://localhost). In order to test it you'll need to run the test from your web server.

deleted-user-ugCMpXci8bn5

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.

khutchins

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/

deleted-user-ugCMpXci8bn5

..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).

khutchins

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

deleted-user-ugCMpXci8bn5

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

khutchins

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>

deleted-user-ugCMpXci8bn5

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.

deleted-user-ugCMpXci8bn5

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...

khutchins

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?

JohnGravois

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

deleted-user-ugCMpXci8bn5

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?

deleted-user-ugCMpXci8bn5

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..

khutchins

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.

deleted-user-ugCMpXci8bn5

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)

khutchins

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.

deleted-user-ugCMpXci8bn5

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

khutchins

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">

deleted-user-ugCMpXci8bn5

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?

khutchins

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>

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.