AnsweredAssumed Answered

CSS Positioning Issues

Question asked by jfarmer@cityofstafford on Dec 9, 2013
Latest reply on Dec 9, 2013 by jfarmer@cityofstafford
I have a web application that I am having some CSS positioning issues with. The Geocoder box is not positioning to the right of the zoom buttons as I would like (under the "style" tags, "#search"). I have tried both using percents and pixels, left and right but the box is stuck on top of the overview map.
The URL to view it is here: [HTML]http://www.staffordpw.com/GIS(Geocoder).html[/HTML]. You can use the temporary username of "pwuser" and password "stafford".

The code is as follows:
<!DOCTYPE html>   <html>     <head>      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">     <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">     <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>     <title>City of Stafford Plans Application</title>      <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/dojo/dijit/themes/claro/claro.css">         <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/esri/css/esri.css">     <style>        html, body, #map { height: 100%; width: 100%; margin: 0; padding: 0; }, #search {display: block; position: absolute; z-index:2; left:25%;}     </style>      <script src="http://js.arcgis.com/3.7/"></script>     <script>        var map, geocoder;       require([         "esri/map", "esri/dijit/Geocoder", "esri/dijit/Scalebar", "esri/dijit/OverviewMap", "esri/arcgis/utils",         "dojo/parser", "dojo/ready",         "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/TitlePane",         "dojo/domReady!"       ], function(         Map, Geocoder, Scalebar, OverviewMap, arcgisUtils,         parser, ready       ) {   ready(function () {    parser.parse();    arcgisUtils.createMap("3c8f5130dea94b0797fc63a9f16fc58e", "map").then(function (response) {      map = response.map;     var geocoder = new Geocoder({     map: map}, "search");     var scalebar = new Scalebar({     map: map,     attachTo: "bottom-left",     scalebarUnit: "english",     scalebarStyle: "ruler"     });     var overviewMapDijit = new OverviewMap({     map: map,     visible: true,     color: "#00FF66",     opacity:.40,     expandFactor:1.5,     attachTo: "top-right"     });     overviewMapDijit.startup();     geocoder.startup();    });   });       });     </script>    </head>     <body class="claro">     <div data-dojo-type="dijit/layout/BorderContainer"           data-dojo-props="design:'headline', gutters:false"           style="width:100%;height:100%;margin:0;">       <div id="map"             data-dojo-type="dijit/layout/ContentPane"             data-dojo-props="region:'center'"             style="padding:0;">         <div style="position:absolute; right:20px; top:10px; z-Index:999;">             <div data-dojo-type="dijit/layout/ContentPane" style="width:380px; height:280px; overflow:auto;">   <div id="search">    </div>           </div>         </div>       </div>     </div>   </body>    </html>

Outcomes