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. Edit fiddle - JSFiddle

nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Bug on js map ver 4.1

LaxmanThapa

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.

Edit fiddle - JSFiddle

Trouver plus de publications taguées avec

Accepted answers

All comments

LaxmanThapa

Thank to the updates on the new release i.e. 4.2, the bug has been fixed.

Thanks

Laxman

ReneRubalcava

Should be out this week.

LaxmanThapa

Do you know when version 4.2 will be released because I have to put online my website this week and this map is critical?

ReneRubalcava

This will be fixed in 4.2.

ReneRubalcava

Checked on a smaller screen, happens when you scroll down. I'll pass it on.

kenbuja

I'm seeing it in Firefox, Chrome, and IE

RickeyFight

I see the issue with Chrome.

ReneRubalcava

What browser are you using? I'm not seeing any issue with popups or zoom using the latest fiddles you provided in Chrome, Firefox or Safari.

LaxmanThapa

I have updated the Fiddle to make it more understandable Edit fiddle - JSFiddle

http://prntscr.com/djm4x1

LaxmanThapa

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...

ReneRubalcava

Try absolute positions.

<SPAN class="selector token">html, body</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp; <SPAN class="property token">padding</SPAN><SPAN class="punctuation token">:</SPAN> 0<SPAN class="punctuation token">;</SPAN>
&nbsp; <SPAN class="property token">margin</SPAN><SPAN class="punctuation token">:</SPAN> 0<SPAN class="punctuation token">;</SPAN>
&nbsp; <SPAN class="property token">height</SPAN><SPAN class="punctuation token">:</SPAN> 100%<SPAN class="punctuation token">;</SPAN>
&nbsp; <SPAN class="property token">width</SPAN><SPAN class="punctuation token">:</SPAN> 100%<SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>

<SPAN class="selector token">#viewDiv</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp; <SPAN class="property token">position</SPAN><SPAN class="punctuation token">:</SPAN> absolute<SPAN class="punctuation token">;</SPAN>
&nbsp; <SPAN class="property token">top</SPAN><SPAN class="punctuation token">:</SPAN> 400px<SPAN class="punctuation token">;</SPAN>
&nbsp; <SPAN class="property token">bottom</SPAN><SPAN class="punctuation token">:</SPAN> 0<SPAN class="punctuation token">;</SPAN>
&nbsp; <SPAN class="property token">right</SPAN><SPAN class="punctuation token">:</SPAN> 0<SPAN class="punctuation token">;</SPAN>
&nbsp; <SPAN class="property token">left</SPAN><SPAN class="punctuation token">:</SPAN> 0<SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>

<SPAN class="selector token">.box</SPAN><SPAN class="punctuation token">{</SPAN>
&nbsp; <SPAN class="property token">position</SPAN><SPAN class="punctuation token">:</SPAN> absolute<SPAN class="punctuation token">;</SPAN>
&nbsp; <SPAN class="property token">top</SPAN><SPAN class="punctuation token">:</SPAN> 0<SPAN class="punctuation token">;</SPAN>
&nbsp; <SPAN class="property token">left</SPAN><SPAN class="punctuation token">:</SPAN> 0<SPAN class="punctuation token">;</SPAN>
&nbsp; <SPAN class="property token">right</SPAN><SPAN class="punctuation token">:</SPAN> 0<SPAN class="punctuation token">;</SPAN>
&nbsp; <SPAN class="property token">height</SPAN><SPAN class="punctuation token">:</SPAN>400px<SPAN class="punctuation token">;</SPAN>
&nbsp; <SPAN class="property token">background</SPAN><SPAN class="punctuation token">:</SPAN>white<SPAN class="punctuation token">;</SPAN>
&nbsp; <SPAN class="property token">outline</SPAN><SPAN class="punctuation token">:</SPAN>2px solid red<SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

LaxmanThapa

@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.

RickeyFight

Try removing the

<SPAN class="selector token">.box</SPAN><SPAN class="punctuation token">{</SPAN>
 <SPAN class="property token">height</SPAN><SPAN class="punctuation token">:</SPAN>400px<SPAN class="punctuation token">;</SPAN>
 <SPAN class="property token">background</SPAN><SPAN class="punctuation token">:</SPAN>white<SPAN class="punctuation token">;</SPAN>
 <SPAN class="property token">outline</SPAN><SPAN class="punctuation token">:</SPAN>2px solid red<SPAN class="punctuation token">;</SPAN>
 <SPAN class="punctuation token">}</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

from the css

Rejoindre la conversation

Les membres connectés peuvent publier, suivre les mises à jour, et plus encore. Nouveau ici ? Inscrivez-vous gratuitement.

Liens rapides

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.