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

[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

[KellyHutchins]

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

[KellyHutchins]

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

[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