mcdade31

Multiple Drop Downs in same div

Discussion created by mcdade31 on Aug 24, 2012
Latest reply on Aug 24, 2012 by mcdade31
I have two drop down menus: 1 for a search function and 1 to open up a basemap gallery. I would like them both to be in either the header or the main content pane. However, when I put them in the same div id the map doesn't draw. The map draws as the code is written now and the drop boxes function as expected, however, the search function is placed in a very small (16px high) window area.

This may be more of a HTML or CSS question, but I can't seem to locate the error in why both can't be placed in the same area of the page?

<!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" />
      <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
      <title> 
      </title>
      <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.0/js/dojo/dijit/themes/claro/claro.css" />
      <style type="text/css"> 
         html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
         .esriBasemapGallerySelectedNode .esriBasemapGalleryThumbnail{
         border-color: #66FFFF !important;
         }
         #header { 
         padding-top:5px; 
         padding-left:10px; 
         background-color:darkgreen; color:white; font-size:18pt; 
         text-align:left; font-weight:bold;
         height:40px; 
         } 
         #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.0"></script>
      <script type="text/javascript"> 
         dojo.require("dijit.dijit"); // optimize: load dijit layer
         dojo.require("dijit.layout.BorderContainer");
         dojo.require("dijit.layout.ContentPane");
         dojo.require("esri.map");
         dojo.require("dijit.TitlePane");
         dojo.require("esri.dijit.BasemapGallery");
         dojo.require("esri.arcgis.utils");
         dojo.require("esri.tasks.locator");
         
         var map, locator;
         
         function init() {
           var initExtent = new esri.geometry.Extent({"xmin":-9265357.374781793,
         "ymin":3337183.1320917513,
         "xmax":-9021064.632382275,
         "ymax":3476757.145740537,
         "spatialReference":{"wkid":102100}});
           
         map = new esri.Map("map",{extent:initExtent});
           
           createBasemapGallery();
           
           //resize the map when the browser resizes
           dojo.connect(dijit.byId('map'), 'resize', map,map.resize);
         
         locator = new esri.tasks.Locator("http://tasks.arcgis.com/ArcGIS/rest/services/WorldLocator/GeocodeServer");
           dojo.connect(locator, "onAddressToLocationsComplete", showResults);
           
           map.infowindow.resize(200,125);
         }
         
         function locate() {
           map.graphics.clear();
           var address = {"SingleLine":dojo.byId("address").value};
           locator.outSpatialReference= map.spatialReference;
           var options = {
             address:address,
             outFields:["Loc_name"]
           }
           locator.addressToLocations(options);
         }
         
         function showResults(candidates) {
           var candidate;
           var symbol = new esri.symbol.SimpleMarkerSymbol();
           var infoTemplate = new esri.InfoTemplate("Location", "Address: ${address}<br />Score: ${score}<br />Source locator: ${locatorName}");
         
           symbol.setStyle(esri.symbol.SimpleMarkerSymbol.STYLE_ROUND);
           symbol.setColor(new dojo.Color([153,0,51,0.75]));
         
           var geom;
           
           dojo.every(candidates,function(candidate){
             console.log(candidate.score);
             if (candidate.score > 80) {
               console.log(candidate.location);
               var attributes = { address: candidate.address, score:candidate.score, locatorName:candidate.attributes.Loc_name };   
               geom = candidate.location;
               var graphic = new esri.Graphic(geom, symbol, attributes, infoTemplate);
               //add a graphic to the map at the geocoded location
               map.graphics.add(graphic);
               //add a text symbol to the map listing the location of the matched address.
               var displayText = candidate.address;
               var font = new esri.symbol.Font("16pt",esri.symbol.Font.STYLE_NORMAL, esri.symbol.Font.VARIANT_NORMAL,esri.symbol.Font.WEIGHT_BOLD,"Helvetica");
              
               var textSymbol = new esri.symbol.TextSymbol(displayText,font,new dojo.Color("#666633"));
               textSymbol.setOffset(0,8);
               map.graphics.add(new esri.Graphic(geom, textSymbol));
               return false; //break out of loop after one candidate with score greater  than 80 is found.
             }
           });
           if(geom !== undefined){
             map.centerAndZoom(geom,15);
           }
         
         }
         
         function createBasemapGallery() {
           var basemapGallery = new esri.dijit.BasemapGallery({
             showArcGISBasemaps: true,
             map: map
           }, "basemapGallery");
         
           var selectionHandler = dojo.connect(basemapGallery,"onselectionchange",function(){
             dojo.disconnect(selectionHandler);
             //add the operational layers to the map
             var operationalLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://<myserver>/arcgis/rest/services/Dynamic/Parks/MapServer", {"opacity":1});
             map.addLayer(operationalLayer);
           });
           
           basemapGallery.startup();
           
           
           dojo.connect(basemapGallery, "onerror", function(msg) {console.log(msg)});
         }
         
         
         
         //show map on load 
         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="header" class="roundedCorners" dojotype="dijit.layout.ContentPane" region="top" align="left">
            Template
         </div>
         <!--Search Function-->
         <div id="top" class="roundedCorners" dojotype="dijit.layout.ContentPane" region="top" align="right">
            <div style="position:absolute; right:160px; top:10px;">
               <div dojoType="dijit.TitlePane" title="Search" closable="false" open="false">
                  <b><i>  Search by Address:</i></b>  
                  <br /> 
                  <textarea type="text" id="address">Enter Address</textArea> 
                  <br /> 
                  <button dojotype="dijit.form.Button" onclick="locate()">Search</button> 
               </div>
               <div id="locate"></div>
            </div>
         </div>
         <!--Layer Toggle-->
         <!--Basemap-->
         <div id="map" dojotype="dijit.layout.ContentPane" region="center" style="border:1px solid #000;">
            <div style="position:absolute; right:20px; top:10px; z-Index:98;">
               <div dojoType="dijit.TitlePane" title="Switch Basemap" closable="false" open="false">
                  <div dojoType="dijit.layout.ContentPane" style="width:380px; height:280px; overflow:auto;">
                     <div id="basemapGallery"></div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </body>
</html>

Outcomes