Vertical displacement of the map div, displaces the coords

Question

(I moved this post because I think it did not belong there)
When I show other divs dynamically given certain state that move the div of the map up or down, the pointer on the map still thinks it is in the old location.
To illustrate the current problem i have created the plunk
rubberband example

(I used as a base the plunk created on this thread)
To reproduce the problem:
1. click on map link
2. click on Zoom By rubber button
3. create a box in the map
4. Click "Show Message"
5. click on Zoom By rubber button
6. You will see that when you try to create the box in the map, it is displaced by the height of the message.

Calling a map.resize every time I show the message will solve the problem, but this was just an example. My application will show and hide different pieces of the page depending on state that will make the map div move up or down, or even worst since it is responsive different sizes will stack different ways.

I also tried the suggestions http://forums.arcgis.com/threads/501...cross-browsers and I was able to create the listener, but it only fires when resizing the window, besides this is not so much a resize of the div but changing the position.

This must be a fairly common usecase, 
What am i missing ?

JonathanUihlein · Answer

there is no real way to manually call those methods on map for every  single combination on when the map is going to be displaced.

Why not?

It has to  be an event that tells you when the reposition happen.

Exactly. The map isn't going to throw an event for something unrelated to the map itself. You need to create a custom event for changes in your interface.It only works when you resize the the browser window, but when you use the plank I shared, and add things to the dom, which causes the map to reposition, that event is not fired.

This sounds more like a flaw in your application design, rather than a problem with the JSAPI.

If you add anything to the dom, fire map.resize() and map.resposition. 
Anytime somethings gets added or removed from the dom, an event can and will be fired.

Another option: wire up an event on the map container to see when the height or width of the container has been changed.

JorgeFiallega · Answer

Yes, there is also map.reposition and what I thought was going to be the key, the reposition() event.
Calling map.resize and map.reposition works when you call it at the right time, but for flexible enough ui there is no real way to manually call those methods on map for every single combination on when the map is going to be displaced. It has to be an event that tells you when the reposition happen. I of course tried listening for the reposition event, but it does not work. It only works when you resize the the browser window, but when you use the plank I shared, and add things to the dom, which causes the map to reposition, that event is not fired.
As I said, what is even more important is targeting different devices, now you have stacking of elements that will for sure move the map.

JohnathanBarclay · Answer

As well as map.resize there is also map.reposition.

Try calling both methods when the map div changes.