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; } } }

Blank areas in the left side of the map when using Google Chrome browser

MiriEshel

Hi,

One of our clients has developed an application using JavaScript API.
It works well in IE but in Google Chrome (and FireFox), the left side of the map is not displayed.
It is very important to help him since he is Google Map's fan and would prefer to use it (he says that it doesn't happen with Google Maps).

In order ro reproduce it, try the next link:
http://62.219.14.11/ResultsExperts/
user: infoguest
password: infoguest
Try to pan around the map and see that the left part is usually white.
I changed versions of the JS API but it didn't help.

Can you tell why it happends?

Thanks a lot,
Miri

Miri Eshel
GIS Specialist,
Systematics ltd.
Israel

Trouver plus de publications taguées avec

Accepted answers

All comments

ReneRubalcava

nvm. What happens if you remove the reference to the arcgis css?
Since you're using compact, you may not need it.

<link rel=�??"stylesheet" type=�??"text/�??css" href=�??"http:�??/�??/�??serverapi.arcgisonline.com/�??jsapi/�??arcgis/�??2.8/�??js/�??dojo/�??dijit/�??themes/�??claro/�??claro.css">�??

MiriEshel

Hi Rene,

Thanks for your reply. I can try to remove the CSS but the weird thing is, that when I click View Source and save it to a file (infomed1.htm) on my disc or in wwwroot, I don't see the problem anymore (i.e. both file:///C:/Users/Miri/Desktop/infomed.htm and http://infomed1.htm do not reproduce the problem).

Can you try it yourself?

Thanks,
Miri

khutchins

This might be a RTL issue. Looks like you have the direction on the map set to RTL. The map itself needs to stay LTR but the UI around it can be RTL.

MiriEshel

Hi Kelly,

The client tried both with rtl and without ib the DIV of the map and he got the same results.
I'm pretty sure it is something else that conflicts with his styles.

Have you tried to download the source code and run it?

Thanks,
Miri

khutchins

Miri,

We haven't downloaded and setup a test here but we'll take a look.

Kelly

JanelYang

Hi Miri,

After checking I think it is an RTL problem. This map can be loaded completely only if the map div has a "left-to-right" direction. In this website, everything under the "body_content" div has been stylized as right-to-left in the css. To deal with this issue without making changes on css files, the map div needs to be moved out of the "body_content" div.

Workaround:

1. In line 1024, remove id="map" from the <div> tag. The div will be disconnected with the map and become an empty area. The new map div will be overlaid above this empty area.

2. Insert a new map div (left-to-right) in the main content div (after line 59) but outside the body_content div (before line 692). Assign an absolute position to this new map div so it will fall within the empty area. For example:
<div id="map" style="position:absolute;top:480px;width:500px;height:280px;direction:ltr;margin-right:232px;"></div>
Attached is an example I made to reproduce/solve this issue. All css and js links are pointing to http://62.219.14.11/.

Jerome

rtl_issue_workaround.zip

MiriEshel

Hi Jerome,

Thank you very much for your answer. I asked the client to try it and he did not return to me yet.

Meanwhile...
1. In the attached file, I do not see the workaround that you wrote about it, only the code that reproduces the problem. Did you forget to put the workaround?

2. I found out in other client's site that from Javascript API version 2.5 to 2.6 something happened and it behaves strangly regarding the rtl function since 2.6.
I can also advise the current client to use 2.5. You can try it yourself.

3. Another problem...The initial intention of our client was to hide the map in the beginning (display:none) and only upon clicking on a button, the map will be displayed.
The thing is that when the map is displayed after clicking on the button, its size is 400 * 400 instead of 280 * 500 as it should be. Why is that?

Thanks a lot,
Miri

MiriEshel

Hi Jerome,

The client just wrote me that what you suggested works so thank you again (as I said, I think moving back to 2.5 could help too but it's better that way).

He still have the problem of 400 * 400 size instead of 280 * 500 when the map is hidden and then displayed.

Thanks again,
Miri

JanelYang

Hi Miri,

Could you please provide the HTML file with the 400*400 size problem?
It would be helpful if I can take a look at the code.

Thanks,
Jerome

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.