Constrain Moveable DND Dojo Popup Window to Map Element

Question

I have a ArcGIS Enterprise (Portal) Web AppBuilder template that I've customized to allow for my pop-up windows to be dragged around the screen, largely using the example located here.

The issue I'm having, that I've been unable to resolve, is that the popup is not constrained to the map window. I've tried, but not succeeded, in using Dojo's parentConstrainedMoveable. I've found an example here that keeps a floating pane (with id = "searchbox") within the confines of a parent pane (with class = "container"). Essentially, I want the "map" element of my Web AppBuilder template to be the parent that tells my identify pop-up window that it can't be moved outside the confines of the map element.

Is there an easy way to modify the JavaScript in link 1 to incorporate the concepts of link 2?

Answer 1

I don't specifically know how to resolve this problem, but I came across your post and figured I would try to help in any way I could.

This likely is a bug between dojo (suggesting a one size fits all) with the parentConstrainedMoveable and the esri logic for the map node/container. I am wondering if dojo achieves css absolute positioning, and some esri Web AppBuilder logic prevents the map container from being a good parent- which would require relative css positioning.

One way I would try to work around this issue is to see if the esri ArcGIS API for JavaScript (within the confines of Web AppBuilder development) provides a way to help create html popups.

If the first work around is not viable/feasible, a second work around would be to create your own popup div using HTML, JavaScript, and CSS. This will give you all of the freedom, but since you will be creating it yourself, you won't have the peace of mind that it has been tested in esri Web AppBuilder in most all situations, which is what the first work around offers.