topic Re: CSS position:absolute not working in ArcGIS JavaScript Maps SDK Questions

CSS position:absolute not working

LloydBronn — Sat, 11 Dec 2021 23:10:32 GMT

I'm using the esriSimpleSlider with a dijit button to trigger a GP tool. I've gotten the placement of these where I want them , but for some reason position:absolute; is not working. The box moves around if I change the size of my browser. Here are my div tags:

<body class="claro">
    <div id="mapDiv" ></div>
     
      <div id="search"></div>
     
     <div id="HomeButton"></div>
     <div style="position:absolute; left:15px; bottom:15px; z-Index:999;">
     
    <div id="info" class="esriSimpleSlider" style="position:absolute; left:82px; bottom:775px; z-Index:999;">
      Click button to draw a polygon on the map. A current forecast report will be generated for your chosen region.<br>
       <div data-dojo-type="dijit.form.Button"  id="drawPoly" onclick="app.toolbar.activate(esri.toolbars.Draw.RECTANGLE);app.map.hideZoomSlider();">
        Draw
      </div>
    </div>‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: CSS position:absolute not working

KellyHutchins — Wed, 12 Apr 2017 16:26:28 GMT

I'm not sure what you mean by using the esriSimpleSlider. That is a class that is associated with the Map zoom (+/-) but it looks like in your app you are applying it to a div. That class will apply the following css to your info div. If you can provide a working version of your source it would be easier to help troubleshoot because we could use the browser developer tools to see how your css is being applied.

 position: absolute; text-align: center; border: 1px solid #57585A; background-color: #FFF; color: #4C4C4C; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px;‍

Re: CSS position:absolute not working

RobertScheitlin__GISP — Sat, 11 Dec 2021 23:10:39 GMT

Lloyd,

You should not be using bottom if you are really wanting it to position to the top then:

      #info {
        /* bottom: 20px; */
        color: #255;
        height: auto;
        font-family: arial;
        font-size: 14px;
        left: 30px;
        margin: 5px;
        padding: 10px;
        position: absolute;
        text-align: center;
        width: 200px;
        z-index: 40;
      }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

  <div id="info" class="esriSimpleSlider" style="position:absolute; left:70px; top:55px;">
    Click button to draw a polygon on the map. A current forecast report will be generated for your chosen region.<br>
    <div data-dojo-type="dijit.form.Button" id="drawPoly" onclick="app.toolbar.activate(esri.toolbars.Draw.RECTANGLE);app.map.hideZoomSlider();">
      Draw
    </div>
  </div>‍‍‍‍‍‍

Re: CSS position:absolute not working

LloydBronn — Sat, 11 Dec 2021 23:10:42 GMT

Ah, thanks! I missed that line. This works:

 #info {
     
        color: #255;
        height: auto;
        font-family: arial;
          font-size: 14px;
          top: 90px;
        left: 90px;
        margin: 5px;
        padding: 10px;
        position: absolute;
        text-align: center;
        width: 200px;
        z-index: 40;
      }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: CSS position:absolute not working

RobertScheitlin__GISP — Thu, 13 Apr 2017 16:06:38 GMT

I would still advice that you use top instead in the div:

<div id="info" class="esriSimpleSlider" style="position:absolute; left:70px; top:55px;">

Re: CSS position:absolute not working

LloydBronn — Thu, 13 Apr 2017 16:54:58 GMT

I changed it there too. Thanks!

Re: CSS position:absolute not working

LloydBronn — Sat, 11 Dec 2021 23:10:36 GMT

Right, sorry I meant to say the form button. This script has been modified from this example. The draw widget there stays staionary on the screen if the map is resized. I want it to stay fixed in the upper left corner, next to the home button and under the search bar. I've tried moving the div around, to no avail. Here is my script:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"/>
    <title>GP Task Population Zonal Stats</title>

    <link rel="stylesheet" href="https://js.arcgis.com/3.20/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/css/esri.css">
    <style>
      html, body, #mapDiv {
        height: 100%;
        margin: 0;
        padding: 0;
        width: 100%;
      }
      #info {
        bottom: 20px;
        color: #255;
        height: auto;
        font-family: arial;
          font-size: 14px;
        left: 30px;
        margin: 5px;
        padding: 10px;
        position: absolute;
        text-align: center;
        width: 200px;
        z-index: 40;
      }
       #HomeButton {
      position: absolute;
      top: 95px;
      left: 20px;
      z-index: 50;
       }
        .esriPopup .titleButton.maximize {
        display: none
      }
       .esriPopup .sizer {
          position: relative;
          width: 150px;
          z-index: 1;
        }    
          .esriPopup .contentPane {
               text-align: left;   
          }
       #search {
         display: block;
         position: absolute;
         z-index: 2;
         top: 20px;
         left: 75px; 
          }
       .esriPopup .actionsPane .zoomTo{     
       display: none; 
          } 
          
          #reportLink {
               text-decoration: none;
               }
    </style>

    <script>var dojoConfig = { parseOnLoad: true };</script>
    <script src="https://js.arcgis.com/3.20/"></script>
    <script>
      var app;

    require([
         "esri/config",
        "esri/map",
          "esri/arcgis/utils",
        "esri/tasks/Geoprocessor",
        "esri/tasks/GeometryService",
        "esri/tasks/BufferParameters",
          "esri/layers/ArcGISDynamicMapServiceLayer",
          "esri/graphic",
            "esri/toolbars/draw",
          "esri/geometry/webMercatorUtils",
          "esri/SpatialReference",
        "esri/tasks/FeatureSet",
        "esri/symbols/SimpleFillSymbol",
          "esri/dijit/Popup",
        "esri/dijit/PopupTemplate",
          "esri/InfoTemplate",
          "esri/layers/FeatureLayer",
          "esri/symbols/SimpleMarkerSymbol",
          "esri/symbols/SimpleLineSymbol",
          "esri/dijit/InfoWindow",
          "esri/dijit/BasemapGallery",
          "esri/dijit/HomeButton",
          "esri/dijit/Search",
          "dojo/dom-construct",
        "esri/Color",
          "dojo/dom",
            "dojo/i18n!esri/nls/jsapi",
          "dojo/dom-attr",
          "dojo/query",
          "dojo/on",           
          "dojo/parser",
            "dojo/string",
          "dijit/registry",
          "dijit/layout/BorderContainer",
        "dijit/layout/ContentPane",
          "dijit/TitlePane",
        "dojo/domReady!"
      ],
    function( esriConfig, Map,  arcgisUtils, Geoprocessor, GeometryService,
               BufferParameters,  ArcGISDynamicMapServiceLayer, Graphic, Draw, webMercatorUtils,
               SpatialReference, FeatureSet, SimpleFillSymbol, Popup, PopupTemplate, 
               InfoTemplate, FeatureLayer, SimpleMarkerSymbol,
               SimpleLineSymbol, InfoWindow,
               BasemapGallery, HomeButton, Search, domConstruct, 
               Color, dom, esriBundle, domAttr, query, on, parser, string, registry){

      var map, gp, toolbar;
       

      app = {
        "map": map,
        "toolbar": toolbar
      };
      
        app.map = map = new Map("mapDiv", { 
          basemap: "hybrid", 
          center: [-95, 40],
          zoom: 5,
            infoWindow: infoWindow
        });
        
        map.on("load", initTools);
          
            esriBundle.widgets.Search.main.placeholder = "Find a location";

            esriConfig.defaults.io.corsDetection = false;
            esriConfig.defaults.geometryService = new GeometryService("http://<ourserver>/arcgis/rest/services/Utilities/Geometry/GeometryServer");
            esriConfig.defaults.io.proxyUrl = "http://<ourserver>/DotNet/proxy.ashx";
            esri.config.defaults.io.alwaysUseProxy = false;
            esriConfig.defaults.io.timeout = 180000;
            
            
            (function() {
                    var cors_api_host = 'cors-anywhere.herokuapp.com';
                    var cors_api_url = 'https://' + cors_api_host + '/';
                    var slice = [].slice;
                    var origin = window.location.protocol + '//' + window.location.host;
                    var open = XMLHttpRequest.prototype.open;
                    XMLHttpRequest.prototype.open = function() {
                    var args = slice.call(arguments);
                    var targetOrigin = /^https?:\/\/([^\/]+)/i.exec(args[1]);
                    if (targetOrigin && targetOrigin[0].toLowerCase() !== origin &&
                    targetOrigin[1] !== cors_api_host) {
                    args[1] = cors_api_url + args[1];
                    }
                    return open.apply(this, args);
                    };
                    })();
                    
           
            var home = new HomeButton({
          map: map
         }, "HomeButton");
         home.startup();
           
           var search = new Search({
            map: map,
               showInfoWindowOnSelect: false,
               enableLabel: false,
               enableHighlight: false,
                  showSuggestions: false
         }, "search");
         search.startup();

           var infoWindow = new InfoWindow;
           
      function initTools(evtObj) {
          var locationStr;
            var dots;
            
          gpReport = new Geoprocessor("http://<ourserver>/arcgis/rest/services/Region_Report/GPServer/RegionReport");

        app.toolbar = toolbar = new Draw(evtObj.map);
        toolbar.on("draw-end",generateReport);     
     
       
      function generateReport(evtObj){
            
        var geometry = evtObj.geometry;

          var mp = webMercatorUtils.webMercatorToGeographic(geometry); //convert map coordinates to lat/lon
          var extent = mp.getExtent(); //get extent in lat/lon
          var center = geometry.getCentroid();
          
          var xmin = extent.xmin.toFixed(2); //west_lon
          var ymin = extent.ymin.toFixed(2); //south_lat
          var xmax = extent.xmax.toFixed(2); //east_lon
          var ymax = extent.ymax.toFixed(2); //north_lat
          
          var locationStr = prompt("Please Enter a Region Name","");          
             
                var taskParams = {
                "region_name": locationStr,
                    "west_lon": xmin,
                    "south_lat": ymin,
                    "east_lon": xmax,
                    "north_lat": ymax
              };
          
          console.log(xmin);
          console.log(ymin);
          console.log(xmax);
          console.log(ymax);
          
          var locationNew = locationStr.replace(/ /g,"_");
          
        var symbol = new SimpleFillSymbol("none", new SimpleLineSymbol("dashdot", new Color([255,0,0]), 2), new Color([255,255,0,0.25]));
        var graphic = new Graphic(geometry,symbol);

        map.graphics.add(graphic);
        toolbar.deactivate();

        var features= [];
        features.push(graphic);
          
          gpReport.execute(taskParams,displayResults,gpreportFailure); //generate report
          
          map.graphics.clear();
          
            map.infoWindow.resize(256,256);
          map.infoWindow.show(center,map.getInfoWindowAnchor(center));
          map.infoWindow.setTitle(locationNew);
          map.infoWindow.setContent("Forecast Analysis Report")
          var msg = "Generating Report";
            
          var dots = window.setInterval(function() {
              if (msg === "Generating Report...."){
                  msg = "Generating Report";
              }
              map.infoWindow.setContent(msg);
              msg += ".";
          }, 400);
            
            function displayResults(results, messages){
               map.infoWindow.setTitle(locationNew);
               map.infoWindow.clearFeatures();
               var contentResult;

          
          var pdfIcon = "http://<ourserver>/PDF_icon.png";
          var reportPath = "http://<ourserver>/PDF_Reports/" + locationNew + "_Forecast_Report.pdf";
          
          if(results == 0){
               contentResult ='<a target="_blank" href="' + reportPath + '"><IMG SRC="' + pdfIcon + '"width=25% height=25%/></a>';
          }
          else{
               contentResult = "Unable To Generate Report";
          }
               clearInterval(dots);
               map.infoWindow.resize(256,256);
               map.infoWindow.setContent(contentResult);
               map.infoWindow.setTitle(locationNew + " Forecast Report");
          };
       
          function gpreportFailure(error){
                    
                    var details = domConstruct.create("div", {
                      "innerHTML": "Error: " + error
                    }, query(".break", map.infoWindow.domNode)[0],"after" );
                    console.error("Error occurred: ", error);
                    
                    clearInterval(dots);
                    map.infoWindow.setContent("Unable To Generate Report");     
               };
                    
                    };
               
               
          }

    });
    </script>
  </head>

  <body class="claro">
  
    <div id="mapDiv">
     </div>

      <div id="search"></div>
     
     
     <div id="HomeButton"></div>

     <div style="position:absolute; left:15px; bottom:15px; z-Index:999;"></div>
     
     <div id="info" class="esriSimpleSlider" style="position:absolute; left:82px; bottom:700px;">
     
      Click button to draw a polygon on the map. A current forecast report will be generated for your chosen region.<br>
       <div data-dojo-type="dijit.form.Button"  id="drawPoly" onclick="app.toolbar.activate(esri.toolbars.Draw.RECTANGLE);app.map.hideZoomSlider();">
        Draw
      </div>
    </div>
     
    
     


  </body>
</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍