Bug on js map ver 4.1

LaxmanThapa · ‎12-09-2016

When map isnot placed at the top of the page, the map has following bugs

The zoom on mouse wheel is not centered
The popup on map click does not position correctly.

If I place the same map on the top of the page, then I do not have this bug.

Can someone help us solve this problem. Please click on the JSFiddle to see the bug.

RickeyFight · ‎12-09-2016

Try removing the

.box{
 height:400px;
 background:white;
 outline:2px solid red;
 }‍‍‍‍‍

from the css

LaxmanThapa · ‎12-12-2016

@Rickey That is the point. For me, the map needs to be somewhere in the middle. The 'box' is to show that there are some element like pictures, texts.

ReneRubalcava · ‎12-12-2016

Try absolute positions.

html, body {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
}

#viewDiv {
  position: absolute;
  top: 400px;
  bottom: 0;
  right: 0;
  left: 0;
}

.box{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height:400px;
  background:white;
  outline:2px solid red;
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

LaxmanThapa · ‎12-12-2016

I cannot use absolute position because then I have to readjust the position of the map on every resize, device rotation etc etc... And I had tried it before, absolute positioning does not help. I wonder why simple thing like this is not working for esri map...

RickeyFight · ‎12-13-2016

Why don't you just change the 400px to 50%? Will that work?

html, body {
 padding: 0;
 margin: 0;
 height: 100%;
 width: 100%;
}
#viewDiv {
 position: absolute;
 top: 50%;
 bottom: 0;
 right: 0;
 left: 0;
}
.box{
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 height:50%;
 background:white;
 outline:2px solid red;
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍