topic Re: How to apply an offset to scalebar dijit? in ArcGIS JavaScript Maps SDK Questions

How to apply an offset to scalebar dijit?

BarryGuidry — Wed, 14 Aug 2013 20:30:50 GMT

Can someone help me to apply an offset to the scalebar dijit? In my application, due to multiple panes and interactivity, the "attachTo:" property alone does not work for me.

var scalebar = new esri.dijit.Scalebar({
                    map: map,
                    attachTo:"top-right",
                    scalebarUnit: "english"
                });

Re: How to apply an offset to scalebar dijit?

DianaBenedict — Sat, 11 Dec 2021 21:01:32 GMT

In the example below I was able to manipulate the location of the scale bar using the following combination of CSS, HTML and JS. Hope this helps

Also, note that in IE 9 you can hit F12 after you have loaded your app and then select the HTML tab and click on the "select element" tool. From here you can navigate to your HTML element of interst on your page and click on it (you will see it highlight in blue outline). You should be able to see the CSS that is associated with it. I have used this tool many times in order to tweak elements on my page.

[HTML]
/* Map Scalebar and ScaleText transbox*/
.transboxScale
{
    left:20px;
    bottom:5px;
    height:40px;
    width:150px;
    position:absolute;
    z-index:50;
    background-color:#ffffff;
    opacity:0.80;
    filter:alpha(opacity=80);
    border: solid 2px #B5BCC7;
    border-radius: 5px 5px 5px 5px;
    -webkit-border-radius: 5px;
    box-shadow: 2px 2px 4px #323834;
    -webkit-box-shadow: 2px 2px 4px #323834;
    -moz-box-shadow: 2px 2px 4px #323834;
    -o-box-shadow: 2px 2px 4px #323834;
}
/* ScaleText */
#scaleText
{
    left:15px;
    bottom:25px;
    position:absolute;
    z-index:100;
    color:Black;
    font-size:7pt;
    font-style:normal;
    font-weight:bold;
}
/* Scalebar */
#scaleDiv
{
    left: 5px !important;
    bottom: 2px;
    position:absolute;
    z-index:100;
}
.esriScalebar
{
    position: relative;
}
.esriScalebarLabel
{
    font-size:6pt;
    font-style:normal;
    color:Black;
}

        <div class="transboxScale">
          <span id="scaleText"></span>
          <span id="scaleDiv"></span>
        </div>

[/HTML]

   var scalebar = new esri.dijit.Scalebar({
     map: _map,
     attachTo: "bottom-left",
     scalebarUnit: "english"
   }, dojo.byId("scaleDiv"));

Re: How to apply an offset to scalebar dijit?

ZachLiu1 — Wed, 14 Aug 2013 22:49:33 GMT

Like Diana mentioned, actually you can change the position or other styles of any dijits through your own CSS. The easiest way would be find the correct selectors through browser developer tools and then override the native styles.

Re: How to apply an offset to scalebar dijit?

BarryGuidry — Thu, 15 Aug 2013 12:12:34 GMT

Like Diana mentioned, actually you can change the position or other styles of any dijits through your own CSS. The easiest way would be find the correct selectors through browser developer tools and then override the native styles.

Thanks, Zach. I couldn't get that to work though. What I did, though, is simply move my scalebar to the top-right, and shortened the width of the navtoolbar, which now makes the scalebar appear to only be over the map.

Re: How to apply an offset to scalebar dijit?

ZachLiu1 — Thu, 15 Aug 2013 12:40:00 GMT

I used this selector and it works fine for me.

.scalebar_top-right {
top: **px;
right: **px !important;
}