Displaced infowindow after showing hidden map

Question

I have a page where I load three maps from arcgis.com using ArcGIS API for Javascript. All of them are loaded in hidden divs.

When I click in the map to show the infowindow, after I make the map visible, it shows the infowindow displaced. However, if I open the developer tools of Chrome or resize the browser, the infowindow shows in its place. It seems that there is a resize event.

I have tried using

dojo.byId("map").resize()

after showing the map but is says

TypeError: Object #<HTMLDivElement> has no method 'resize'

How can I simulate global resize event without resizing the browser?

Answer 1

Well, resize() is not a html DOM specific method, this is related to map object. try resize and reposition with map object.

try this(sample with AMD):-

    require([
      "esri/map", "dojo/_base/connect", "dijit/registry", ... 
    ], function(Map, connect, registry, ... ) {
      var map = new Map( ... );
      var resizeTimer;
      connect.connect(map, 'onLoad', function(theMap) {
        connect.connect(registry.byId('map'), 'resize', function() {
          //resize the map if the div is resized
          clearTimeout(resizeTimer);
          resizeTimer = setTimeout( function() {
            map.resize();
            map.reposition();
          }, 500);
        });
      });
      ...
    });