Mouse Wheel Zooms in Wrong Place Until Window Resize

[PerryKesselbaum]

Hello,

My application has a problem where after the map loads, when I use the mouse wheel to zoom in, the map zooms in at a location that is not where the cursor is centered. Also, my info windows pop-up in the wrong place. Both the zoom and the pop ups are happening too far 'south' of the cursor/feature.

Strangely, I can get the problem to disappear if I resize the browser window. After I resize the window, the zoom works as usual and info windows show up right next to their features.

I don't know if this is related, but I also notice the map 'jumps around' during the page load. At the start of the load, the home button, base map switcher and esri logo load higher up on the page, then they jump down to where I want them positioned.

I suspect this has something to do with my CSS, but I can't seem to figure it out. If anyone has any advice for how to solve this issue, it would be greatly appreciated. Below are the respective codes for the page.

HTML:
[HTML]<div class="col-md-12">
        <div class="col-md-6"id="legend"> <h2 class="text-muted">Legend</h2>
            <div id="LayerList"> </div>
        </div>
        <div class="col-md-6" id="Map">
            <div id="HomeButton"> </div>
            <div id="baseMapToggler"> </div>
            <div id="scale"> </div>
        </div>
    </div>[/HTML]

CSS:

#Map {          height: 940px;     width: 75%;     padding-bottom:150px;     margin-left: 250px;     margin-top:-705px; }  #legend {     padding:10px;     left: 25px;     width: 25%; }  #LayerList {     left: 25px;     width: 25%; }

JS:

function(Map, Legend, FeatureLayer, InfoTemplate,  HomeButton, BasemapToggle, Scalebar, dom, domConstruct, on) {         var pointTemplate = new InfoTemplate("<b>${Name}</b><br>${Address}", "${Comment}<br><br>${URL}<br><br>${Picture}");     var otherTemplate = new InfoTemplate("${Name}", "${Comment}");     var Layers = []     var legendLayers = []            var map = new Map("Map", {       autoResize: true,       center: [-86.513039, 39.152544],       zoom: 11,       basemap: "streets"     });  var scalebar = new esri.dijit.Scalebar({   map:map,   scalebarStyle:"ruler",   scalebarUnit:"english", }, dojo.byId("scale"));  var home = new HomeButton({ map: map }, "HomeButton"); home.startup();                      //push several layers into array          var arrayLength = Layers.length; for (var i = 0; i < arrayLength; i++) {     map.addLayer(Layers);     legendLayers.push({ layer: Layers, title:Layers.id }); };  var myLegend = new Legend({     layerInfos: legendLayers,     map: map     }, "LayerList");     myLegend.startup();  var toggle = new BasemapToggle({   map: map,   basemap: "hybrid" }, "baseMapToggler"); toggle.startup();                       });

[PerryKesselbaum]

For anyone interested, I think I've solved the problem by using position: absolute on the divs that hold the map and the legend. I think the resizing of the legend was messing with the map position on the page. Not sure if this is standard best practice or if this is a bug in the legend dijit, but this workaround works for me.

[PerryKesselbaum]

I thought I had solved my problem, but I'm still pulling my hair out over this. I've tried placing all the objects in a container div and tried having them all as independent divs. The only workaround I've found is using 'position: absolute' on everything in that div (the map, the layer list, and the legend header). However, after doing this, all the rest of the non-absolutely positioned divs are no longer positioned properly.

Excluding the legend from the page entirely also seems to resolve the problem (is this a known bug in the legend dijit?)

[KenBuja · Accepted solution]

Try this version of the Fiddle.

I removed the autoResize property and added this code

    map.on("load", function(){        map.resize();     });

[PerryKesselbaum]

Thanks a million Ken! map.resize() does just the trick. Thanks for your help.