ArcGIS API for JavaScript - How to stop infoWindow cropping at map edge?

Question

I'm using esri's ArcGIS API for JavaScript version 3.6 and have a small map (~400px square on desktop) which displays an info window Popup whenever the users mouses over a feature.

If the info window is shown near the edge of the map the info window gets cropped to fit the map boundaries. I'd like to have the info window contents overflow and be completely visible, is there a way to do this short of rolling my own popup outside of the ArcGIS framework?

Here is a pic of the info window getting cropped (sorry, I don't have enough rep to post images):

Info window getting copped

EDIT:

I've tried to set the infoWindow's domNode like so:

var myDiv = some_div_far_awary;

var infoWindow = new esri.dijit.InfoWindow({}, myDiv);
infoWindow.startup();

var map = new esri.Map("my-map-div", {
  // Other configs...
  infoWindow: infoWindow
});

Hoping that if some_div_far_away were outside the map div and absolutely position it could show over the map which is just using overflow:hidden to contain popups. No luck though.

Answer 1

well, I not sure why we need to add that info window container with some predefine styling. As you mentioned in the comment "costly calculations on extent change" so i would not suggest you to change the map extent i think you can set info window(re-size info window with maximum suitable size) according to your window size.

below is the sample code:

var infoWindow = new esri.dijit.InfoWindow({}, dojo.create("div"));
    infoWindow.startup();    

var map = new esri.Map("map", {
          // Other configs... 
          infoWindow: infoWindow
       });

To re-zise the info window you can use:

 map.infoWindow.resize(100,100); // resize(width,height)

Another approach I would like to suggest here, if you think it's a small place to show info window properly, why don't you use mobile popup...they are really cool.

below is the code for that:

 var popup = new esri.dijit.PopupMobile(null, dojo.create("div"));

 var map = new Map("map", {
          basemap: "gray",
          center: [-98.57, 39.82],
          zoom: 4,
          infoWindow: popup
        });

Feel free to shoot your queries..

hope this will help you:)

Answer 2

So, the info template has no the intention to avoid that, because having a floating panel relative to a coordinate, driven to mistakes, because you can't determine what points refer to the float panel.

You could show the fields of a feature in another div, on the leftside of the map or you could use map.centerAt(mappoint) or map.centerAndZoom(mappoint,level) then you info template won't be cropped, because you'll centralize your info window.