<div id="mainSplitter"> <div class="splitter-panel"> <div id="mapDiv"> </div> </div> <div class="splitter-panel"> <p>Data</p> </div> </div>
var resizeTimer; map.on("load", function (theMap) { dojo.connect(dom.byId("mapDiv"), 'resize', function () { //resize the map if the div is resized alert("Hello"); clearTimeout(resizeTimer); resizeTimer = setTimeout(function () { map.resize(); map.reposition(); }); }); });
Hi Christian,
I think it might be because the map isn't aware that its container is being resized.
You may have to write a custom event listener using the splitter.
When the splitter is moved, your event listener would resize the map div (and the map).
If you didn't want to use a jQuery module, I know DOJO has splitter functionality built in using ContentPanes and BorderContainers. The map would automatically resize when its ContentPane is resized.
var resizeTimer; $('#mainSplitter').resize(function () { clearTimeout(resizeTimer); resizeTimer = setTimeout(function () { map.resize(); map.reposition(); }); });