Possible bug? Control behaves strangely when created inside a hidden div

If the map's container div (the argument passed to the VEMap constructor) is hidden at the time of construction, the map behaves erratically when the container div is shown.

Repro: Run the following code and click the Show button. Observe that, when zooming in and out using the mouse wheel, the point that stays fixed on zoom is not in the center of the map, but in the upper left. The scale is also gone.

<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://dev.virtualearth.net/mapcontrol/v3/mapcontrol.js"></script>
<script>
var map = null;
function GetMap()
{
map = new VEMap('myMap');
map.LoadMap();
}
function SetVisible(isVisible)
{
document.getElementById("myMap").style.display = isVisible "block" : "none";
}
</script>
</head>
<body onload="GetMap();">
<input type="button" value="Show" onclick="SetVisible(true);" />
<input type="button" value="Hide" onclick="SetVisible(false);" />
<div id="myMap" style="position: relative; width:320px; height:240px; display: none;"></div>
</body>
</html>

Other details: If the control starts out visible (display: block in the stylesheet), the control can be hidden and shown without any ill effects. If the style attribute visibility: hidden (and the corresponding visibility: visible) are used instead of display, everything behaves normaly.

Known to be an issue in Firefox 1.5 and IE7.

Anyone have any insight



Answer this question

Possible bug? Control behaves strangely when created inside a hidden div

  • r0d

    Try...

    document.getElementById('mapcontroldiv').style.visibility = 'hidden';

    document.getElementById('mapcontroldiv').style.visibility = 'visible';

    This works for me


  • lxiao

    Right, the control does work properly when using the visibility attribute. But the problem is that it takes up space in the layout when it's hidden, which isn't always desirable (like in my case).

    I guess there is a workaround: set the position to absolute when hiding, and to relative when showing. That seems to have the same effect as using the display attribute (but I don't know if there are any other side effects).

    Still, is the issue with the display attribute known to be a bug


  • Possible bug? Control behaves strangely when created inside a hidden div