Map interface trashed if map div is hidden and browser resize occurs

Question

As usual, I can't post code due to application on an intranet...working with an application that has 3 jQuery tabs: a chart, a table, and a map. The chart is the default tab. When the app is first opened I have to make the map tab active in order to initialize the map, then make the chart tab active.

It's been brought to my attention that if the user puts the browser in full-screen mode the map gets messed up. What I've noticed is that if the map tab is inactive and the browser window changes in size (full-screen toggle, zoom in, zoom out, reset to default) the map is irretrievably broken; if the map tab is visible the resize occurs without incident.

We're experimenting with a Bootstrap implementation where the map is in its own window; in some use cases the map is hidden and if the browser is resized the same problem occurs.

Map is set to autoResize; I've also tried listening for full-screen events and resizing/repositioning the map, and adding "data-dojo-type='dijit.layout.ContentPane'" to the map div.

Suggestions welcomed...

BjornSvensson · Answer

FYI: the 3.14 have several fixes regarding map resizing, I think that includes fixing the issue posted here.

JohnGrayson · Answer

What I've done in the past is to assign a value of 200px to the min-height and min-width properties to the map div via css.  I believe this ensured that the map div sizes are not set to zero by external widgets when they are hidden.