AnsweredAssumed Answered

Why isn't my CSS for my scalebar working?

Question asked by csergent08 Champion on Nov 14, 2014
Latest reply on Nov 17, 2014 by csergent08

I am trying to change the background to the scalebar to white using CSS and it appears to have no affect? Any ideas? Here is my code:

 

<!DOCTYPE html>

<html>

    <head>

        <title>Create a Map</title>

        <meta http-equiv="content-type" content="text/html; charset=utf-8">

        <meta name="viewport" content="initial-scale=1,maximum-scale=1, user-scalable=no">

        <link rel="stylesheet" href="http://js.arcgis.com/3.11/dijit/themes/claro/claro.css">

        <link rel="stylesheet" href="http://js.arcgis.com/3.11/esri/css/esri.css">

        <style>

            html, body, #mapDiv

            {

                padding:0;

                margin:0;

                height:100%;

            }

           

            .esriScalebarRuler

            {

                background-color:White;

            }

           

           

           

        </style>

        <script src="http://js.arcgis.com/3.11/"></script>

        <script>

            var map;

            require(["esri/map",

                     "esri/dijit/Scalebar",

                     "esri/geometry/Extent",

                     "esri/layers/ArcGISDynamicMapServiceLayer",

                     "esri/layers/ArcGISTiledMapServiceLayer",

                     "dojo/dom",

                     "dojo/on",

                     "dojo/parser",

                     "dojo/domReady!"], function (Map, Scalebar, Extent, ArcGISDynamicMapServiceLayer, ArcGISTiledMapServiceLayer, dom, on, parser

            ) {

                         // declare initial map extent with spatial reference

                         var initialExtent = new Extent({ "xmin": 777229.03, "ymin": 1133467.92, "xmax": 848340.14, "ymax": 1185634.58, "spatialReference": { "wkid": 3435} });

                         map = new Map("mapDiv", {

                             showAttribution: false,

                             sliderStyle: "small",

                             extent: initialExtent

 

 

 

 

                         });

                         // add imagery

                         var tiled = new ArcGISTiledMapServiceLayer("http://maps.decaturil.gov/arcgis/rest/services/Aerial_2014_Tiled/MapServer");

                         map.addLayer(tiled);

                         // set operational layers

                         var operationalLayer = new ArcGISDynamicMapServiceLayer("http://maps.decaturil.gov/arcgis/rest/services/Public/InternetVector/MapServer", { "opacity": 0.5 });

                         // add operational layers

                         map.addLayer(operationalLayer);

 

 

 

 

                         var scalebar = new Scalebar({

                             map: map,

                             scalebarUnit: "dual"

                         });

 

 

                     }

            );

        </script>

    </head>

    <body class="soria">

        <div id="mapDiv"></div>

    </body>

</html>

Outcomes