Why does my scalebar appear to look different with the same CSS applied to another similar looking app?

ChrisSergent — Sat, 11 Dec 2021 20:59:32 GMT

I have three apps that I am creating as templates side by side. In my gisWeb app, my scalebar looks like this:

In both my gisTemplate app and my gisMobile app they look like this: And I don't know how I got this look. All three apps use the same JavaScript and the same CSS. I have linked to the app versions that are on github. They are pretty small right now. Just to demo that the code is the same, here is the JavaScript and CSS for each:

gisWeb

// scalebar Begin
             var scalebar = new Scalebar({
                 map: map,
                 scalebarUnit: "dual"
             });
             // scalebar End

/* Scalebar */
/* Used CSS Gradient Generator - http://www.colorzilla.com/gradient-editor/ */
.esriScalebarLine, .esriScalebarMetricLine
{
    background: rgb(247,247,247); /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover,  rgba(247,247,247,1) 0%, rgba(219,219,219,1) 50%, rgba(209,209,209,1) 51%, rgba(5,5,5,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(247,247,247,1)), color-stop(50%,rgba(219,219,219,1)), color-stop(51%,rgba(209,209,209,1)), color-stop(100%,rgba(5,5,5,1))); /* Chrome,Safari4+ */
    background: -webkit-radial-gradient(center, ellipse cover,  rgba(247,247,247,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(5,5,5,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-radial-gradient(center, ellipse cover,  rgba(247,247,247,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(5,5,5,1) 100%); /* Opera 12+ */
    background: -ms-radial-gradient(center, ellipse cover,  rgba(247,247,247,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(5,5,5,1) 100%); /* IE10+ */
    background: radial-gradient(ellipse at center,  rgba(247,247,247,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(5,5,5,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#050505',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    border-width:thin;
    }
            
.esriScalebarLabel, .esriScalebarLineLabel,.esriScalebarSecondNumber, .esriScaleLabelDiv
{
    text-shadow:-1px -1px 0 #fff,  
        1px -1px 0 #fff,
        -1px 1px 0 #fff,
        1px 1px 0 #fff;
               
}

gisMobile

// scalebar Begin
             var scalebar = new Scalebar({
                 map: map,
                 scalebarUnit: "dual"
             });
             // scalebar End

/* Scalebar */
/* Used CSS Gradient Generator - http://www.colorzilla.com/gradient-editor/ */
.esriScalebarLine, .esriScalebarMetricLine
{
    background: rgb(247,247,247); /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover,  rgba(247,247,247,1) 0%, rgba(219,219,219,1) 50%, rgba(209,209,209,1) 51%, rgba(5,5,5,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(247,247,247,1)), color-stop(50%,rgba(219,219,219,1)), color-stop(51%,rgba(209,209,209,1)), color-stop(100%,rgba(5,5,5,1))); /* Chrome,Safari4+ */
    background: -webkit-radial-gradient(center, ellipse cover,  rgba(247,247,247,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(5,5,5,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-radial-gradient(center, ellipse cover,  rgba(247,247,247,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(5,5,5,1) 100%); /* Opera 12+ */
    background: -ms-radial-gradient(center, ellipse cover,  rgba(247,247,247,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(5,5,5,1) 100%); /* IE10+ */
    background: radial-gradient(ellipse at center,  rgba(247,247,247,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(5,5,5,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#050505',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    border-width:thin;
    }
.esriScalebarLabel, .esriScalebarLineLabel,.esriScalebarSecondNumber, .esriScaleLabelDiv
{
    text-shadow:-1px -1px 0 #fff,  
        1px -1px 0 #fff,
        -1px 1px 0 #fff,
        1px 1px 0 #fff;
               
}

gisTemplate

 // scalebar Begin
             var scalebar = new Scalebar({
                 map: map,
                 scalebarUnit: "dual"
             });
             // scalebar End

/* Scalebar */
/* Used CSS Gradient Generator - http://www.colorzilla.com/gradient-editor/ */
.esriScalebarLine, .esriScalebarMetricLine
{
    background: rgb(247,247,247); /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover,  rgba(247,247,247,1) 0%, rgba(219,219,219,1) 50%, rgba(209,209,209,1) 51%, rgba(5,5,5,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(247,247,247,1)), color-stop(50%,rgba(219,219,219,1)), color-stop(51%,rgba(209,209,209,1)), color-stop(100%,rgba(5,5,5,1))); /* Chrome,Safari4+ */
    background: -webkit-radial-gradient(center, ellipse cover,  rgba(247,247,247,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(5,5,5,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-radial-gradient(center, ellipse cover,  rgba(247,247,247,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(5,5,5,1) 100%); /* Opera 12+ */
    background: -ms-radial-gradient(center, ellipse cover,  rgba(247,247,247,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(5,5,5,1) 100%); /* IE10+ */
    background: radial-gradient(ellipse at center,  rgba(247,247,247,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(5,5,5,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#050505',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    border-width:thin;
    }
            
.esriScalebarLabel, .esriScalebarLineLabel,.esriScalebarSecondNumber, .esriScaleLabelDiv
{
    text-shadow:-1px -1px 0 #fff,  
        1px -1px 0 #fff,
        -1px 1px 0 #fff,
        1px 1px 0 #fff;
               
}

I'm stuck on this one. Any ideas?

Re: Why does my scalebar appear to look different with the same CSS applied to another similar looking app?

ChrisSergent — Fri, 09 Jan 2015 17:35:30 GMT

I had my variable of OverviewMap and Scalebar in reverse order. So my overviewmap disappeared and the tiled black and white scalebar appeared.

I thought this was worth keeping to demo what can happen when you have your variables in the wrong order.

topic Re: Why does my scalebar appear to look different with the same CSS applied to another similar looking app? in ArcGIS JavaScript Maps SDK Questions

Why does my scalebar appear to look different with the same CSS applied to another similar looking app?

gisWeb

gisMobile

gisTemplate

Re: Why does my scalebar appear to look different with the same CSS applied to another similar looking app?