topic Re: Zoomslider Representation error in IE 11 in ArcGIS JavaScript Maps SDK Questions

Zoomslider Representation error in IE 11

MiriamBrockmann — Mon, 20 Mar 2017 12:20:10 GMT

Hi there!

We are using the Esri Javascript API 3.18.

I've got a strange Error ( from which i don't know if it is even an Error or not ).

The Sliderbar is not displayd correcly and the zoombutton doesn't move.

Our Zoomslider is automatically setup within the building of the Map.

                    map = new Map("map", {
                       spatialReference:spatialRef,
                       lods:lods,
                       logo: false,
                       autoResize:true,
                       sliderPosition: "top-left",
                       sliderStyle: "large",
                       displayGraphicsOnPan: false
                   });

and in the map it's displayed like this:

I searched the Web for any information about strange displaybehaviour of the Slider but found nothing usefull.

There are no css-classes defined from our side for the slider, nor are the regular styles overwritten by any.

Regards, Miriam

Re: Zoomslider Representation error in IE 11

PatrickTaurman2 — Mon, 19 Jun 2017 21:03:16 GMT

Looks like an issue with sliderStyle. If you change from large to small does it work? I was able to reproduce odd behavior using an Esri sample.

<!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>Simple Map</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/css/esri.css">
<style>
html,
body,
#map {
height: 100%;
margin: 0;
padding: 0;
}

</style>
<script src="https://js.arcgis.com/3.20/"></script>
<script>
var map;

require(["esri/map", "dojo/domReady!"], function(Map) {

map = new Map("map", {
basemap: "topo", //For full list of pre-defined basemaps, navigate to http://arcg.is/1JVo6Wd
center: [-122.45, 37.75], // longitude, latitude
autoResize: true,
sliderPosition: "top-left",
sliderStyle: "large",
zoom: 13
});
});

</script>
</head>

</html>

Re: Zoomslider Representation error in IE 11

Noah-Sager — Mon, 19 Jun 2017 22:13:18 GMT

Hmm, I think I was able to get it to work here:

JS Bin - Collaborative JavaScript Debugging

I referenced two css file:

Re: Zoomslider Representation error in IE 11

PatrickTaurman2 — Tue, 20 Jun 2017 12:34:41 GMT

Hi Noah,

Thanks for that, you can also use Claro and the non-calcite version of the Esri CSS.

JS Bin - Collaborative JavaScript Debugging

The question is should you have to add another CSS to get the zoom slider to display correctly (Edited as this is a rhetorical question not meant to be answered because you do have to add another CSS to get it to display properly)? The "Create a map" sample only has the Esri CSS included.

Create a map | ArcGIS API for JavaScript 3.20

Would you reasonably expect to have to add another CSS to handle an optional parameter inside the Map constructor? If it is a reasonable expectation to add another CSS just to handle a simple parameter, should the sample be updated to have both CSS included?

Patrick

Re: Zoomslider Representation error in IE 11

MiriamBrockmann — Tue, 18 Jul 2017 10:15:10 GMT

Thank you Noah Sager! This works!

@Patrick Taurman Thanks for the hint with claro!