Popup is not displayed correctly when map is absolute positioned on page

4720
15
04-18-2012 05:25 AM
BjørnSandvik
New Contributor
Hi,

I have a map on page that is absolute positioned:
http://dl.dropbox.com/u/2306934/NRK/trafikk/popupbug/popup.html

#mapcontainer {
   position: absolute;
   top: 400px;
   left: 300px;
}

The problem with absolute positioned maps is that the popup placement is not working correctly; the popup is displayed outside the map window:

[ATTACH=CONFIG]13627[/ATTACH]

We need to use absolute positioned elements on our site - is it possible to fix this issue?
I presume there is a bug in the "_setPosition" function of esri.dijit.Popup:
http://serverapi.arcgisonline.com/jsapi/arcgis/2.8/js/esri/dijit/Popup.xd.js
0 Kudos
15 Replies
BjørnSandvik
New Contributor
Do you know when this bug will be fixed?
This is a critical feature for our application.

Bjorn
0 Kudos
ShreyasVakil
Occasional Contributor II
Hi,

Our developers are still working on this bug. I can only update you as soon as I have any update on this. I apologize for inconvenience caused to you.

Thanks,
Shreyas
0 Kudos
JohnGravois
Frequent Contributor
NIM080359 was not acknowledged as a valid bug by our development team. They explained that a dijit.layout.BorderContainer or a dijit.layout.ContentPane can be used to position the map with absolute values and provided the following application as an example of a viable approach to resolve the error.
0 Kudos
SebastienPelletier
Occasional Contributor
After 5 years now, this problem is still present 
and your workaround does not work with the version 3.22
0 Kudos
OttarViken_Valvåg
New Contributor III
For what it's worth, the API's positioning logic for the Popup dijit is still not working satisfactorily for us in version 3.8.

After some code digging, we determined that the issue for us is when the popup's content is large enough that there's no selection of anchor point for the popup that avoids the popup overflowing outside the map's boundaries. In this case, instead of making a best effort choice of anchor point, minimizing overflow, the API simply keeps the existing anchor point for the popup.

It should be noted that the content's size is calculated from the dimensions of the Popup._positioner dom element, which appears to be the size of the largest content ever displayed in the popup. So if you're not currently displaying a large popup, you may still have the issue because you previously showed content that caused the _positioner to expand in size.

Our solution was to override the Popup._setPosition function and add logic for the case when no anchor point avoids overflow. Here's what our added logic looks like (in the final else):

if (roomToTheRight && roomAbove) {
    horAnchor = "Left"; verAnchor = "bottom";
}
else if (roomToTheRight && roomBelow) {
    horAnchor = "Left"; verAnchor = "top";
}
else if (roomToTheLeft && roomBelow) {
    horAnchor = "Right"; verAnchor = "top";
}
else if (roomToTheLeft && roomAbove) {
    horAnchor = "Right"; verAnchor = "bottom";
}
else {
    // No room in any direcion, choose anchor that gives most room
    var horCoverages = [];
    horCoverages.push({ "anchor": "", "overflow": Math.max(0, (contentBox.w / 2) - (absoluteX - left)) + Math.max(0, (contentBox.w / 2) - (right - absoluteX + 1)) });
    horCoverages.push({ "anchor": "Right", "overflow": Math.max(0, contentBox.w - (absoluteX - left)) });
    horCoverages.push({ "anchor": "Left", "overflow": Math.max(0, contentBox.w - (right - absoluteX + 1)) });
    var verCoverages = [];
    verCoverages.push({ "anchor": "", "overflow": Math.max(0, (heightNeeded / 2) - (absoluteY - top)) + Math.max(0, (heightNeeded / 2) - (bottom - absoluteY + 1)) });
    verCoverages.push({ "anchor": "bottom", "overflow": Math.max(0, heightNeeded - (absoluteY - top)) });
    verCoverages.push({ "anchor": "top", "overflow": Math.max(0, heightNeeded - (bottom - absoluteY + 1)) });
    var sortFunction = function (a, b) { return a.overflow > b.overflow; };
    horCoverages.sort(sortFunction);
    verCoverages.sort(sortFunction);
    horAnchor = horCoverages[0].anchor;
    verAnchor = verCoverages[0].anchor;
    console.log("There's no room for the popup, chose most optimal anchoring " + verAnchor + horAnchor + "...");
}
0 Kudos
SebastienPelletier
Occasional Contributor

I have trouble understanding your solution Is it possible to have the full code of your _setPosition function?

0 Kudos