Zoomslider Representation error in IE 11

MiriamBrockmann · ‎03-20-2017

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

Noah-Sager · ‎06-19-2017

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

JS Bin - Collaborative JavaScript Debugging

I referenced two css file:

View solution in original post

PatrickTaurman2 · ‎06-19-2017

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>

Noah-Sager · ‎06-19-2017

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

JS Bin - Collaborative JavaScript Debugging

I referenced two css file:

PatrickTaurman2 · ‎06-20-2017

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

MiriamBrockmann · ‎07-18-2017

Thank you Noah Sager! This works!

@Patrick Taurman Thanks for the hint with claro!