Map not fitting itself inside the div

[BrentHoskisson]

I have a div block defined as:

<div id="overviewMap" style="width:290px; height:205px; overflow:hidden;">

The Map is defined as:

new Map("overviewMap", { extent: initExtent, logo: false, slider: false, smartNavigation: false, fitExtent: true });

But when I run the map, only a quarter of the map shows in the div with scrollbars to get to the rest.  How can I force the map to draw only inside the div?  It seems to be a problem with anything not IE. 

The only layer in the map is a DynamicMapService layer.

Also I can set the scale, but it just draws the map smaller and still pushes it down and to the right.

[StevenGraf1]

Without the rest of your div and style elements, it's hard to see what's actually going on.

I would create a div and make it the size that you want and then with the mapoverview inside it as such:

<div style="width:290px; height:205px; overflow:hidden;">
     <div id="overviewMap"></div>
</div>

This will create a div with the pixel size and the map will insert at 100% inside that div.  The way you have it above should work the same but browsers are inconsistent some times.

Steven

[BrentHoskisson]

More information:

I am trying to start the web page with the div hidden.  If I start it with the div visible, it seems to work properly. 

I don't really like to start it visible and then shut it down on the page load.  It looks odd.  And like I said, it seems to be browser specific.  The problem is in Chrome and FireFox, but not in IE.

[StevenGraf1]

So when the page loads you want it hidden.  Then a user clicks a button and the map appears in the page?  Is this the functionality you need?  You can hide a div like this.  And then you can use a toggle button to show/hide the div like this.

[BrentHoskisson]

The problem is not with hiding and showing it.  It is that the map can't correctly initialize when it is hidden.  Because apparently the JavaScript API get the definition of the map limits from parts of the div that are only available when it is visible.

[BrentHoskisson]

I decided to solve this by not loading the Overview map until I needed it the first time.  Then I would make the div visibile.  THEN I ran the code to initialize the map.  It seems to work on all platforms that way.

[NicholasHaney · Accepted solution]

I believe this sample: Edit fiddle - JSFiddle  implements the behavior you desire.

[BrentHoskisson]

Yes, it seems the undocumented solution is to make the layer hidden as well and then make it visible when the div becomes visible.