topic Re: Popup is not displayed correctly when map is absolute positioned on page in ArcGIS JavaScript Maps SDK Questions

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

BjørnSandvik — Wed, 18 Apr 2012 12:25:10 GMT

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

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

BjørnSandvik — Thu, 19 Apr 2012 07:28:00 GMT

The same problem occurs when the map is not absolute positioned as well:
http://dl.dropbox.com/u/2306934/NRK/trafikk/popupbug/popup3.html

On this page, the map is placed below a header div with a height of 400px.

The popup is displaced:
[ATTACH=CONFIG]13664[/ATTACH]

Any solution to this issue?

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

ReneRubalcava — Thu, 19 Apr 2012 12:30:33 GMT

I can't view your code at work because dropbox is blocked, but I can tell by your zoom bar that you don't have <body class="claro"> set. Try adding the class and see if that fixes it.

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

BjørnSandvik — Thu, 19 Apr 2012 16:12:32 GMT

I've added the class to the body tag, but it didn't fix the issue.

The HTML-file is available in the attached file (popup.zip).

Bjorn

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

BjørnSandvik — Fri, 20 Apr 2012 07:57:19 GMT

Anyone from ESRI who knows how to fix this issue?

Is it possible to get an unminified version of the esri.dijit.Popup JavaScript code?
http://serverapi.arcgisonline.com/jsapi/arcgis/2.8/js/esri/dijit/Popup.xd.js

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

PaulBushore — Fri, 20 Apr 2012 16:28:20 GMT

Hello,

I brought the source code in to Visual Web Developer and I removed the header (Which placed the map in the upper left corner) and clicked on a spot near the top of the map div and the response placed the popup below the spot I clicked, within the map. I then re-added the header div and clicked on the same point and the popup appears above the point, off the map area. I only add this as a confirmation of the observed results. I don't know if it is intentional or a bug, hopefully one of the ESRI heroes are taking a look in to it.

If I find out anything I will post back.

Best wishes,

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

ShreyasVakil — Sun, 12 Dec 2021 01:13:26 GMT

I have found this workaround. Please test and see if it works for you.

Replace your : dojo.connect(map,"onClick",function(evt)
with the code given below:

dojo.connect(map,"onClick",function(evt){
          var query = new esri.tasks.Query();
          query.geometry = pointToExtent(map,evt.mapPoint,10);
          var deferred = featureLayer.selectFeatures(query,esri.layers.FeatureLayer.SELECTION_NEW);
          map.infoWindow.setFeatures([deferred]);
    map.infoWindow.show(evt.mapPoint);
    map.infoWindow.resize(200,100);
    map.centerAt(evt.mapPoint);
        });

I am not sure thought if this was your problem! But there is no harm in trying:)

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

BjørnSandvik — Mon, 23 Apr 2012 10:30:33 GMT

Hi Shreyas,

Yes, it is a workaround to recenter the map on each click - but we would like to have the default behavior where the popup is placed according to the map window.

Any chance you'll fix this bug? This seems to work correctly with the standard InfoWindow, the problem occurs in esri.dijit.Popup.

Bjorn

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

ShreyasVakil — Mon, 23 Apr 2012 21:47:54 GMT

Hi Shreyas,

Yes, it is a workaround to recenter the map on each click - but we would like to have the default behavior where the popup is placed according to the map window.

Any chance you'll fix this bug? This seems to work correctly with the standard InfoWindow, the problem occurs in esri.dijit.Popup.

Bjorn

Hi Bjorn,
I was able to reproduce the abnormal behavior of popup, I'll dig in some resources and come back to you.

Shreyas

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

ShreyasVakil — Tue, 24 Apr 2012 22:49:51 GMT

Hi Bjørn,

A bug has been logged for this issue (NIM080359).

Thanks,
Shreyas

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

BjørnSandvik — Mon, 07 May 2012 09:59:41 GMT

Do you know when this bug will be fixed?
This is a critical feature for our application.

Bjorn

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

ShreyasVakil — Tue, 08 May 2012 22:01:50 GMT

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

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

JohnGravois — Thu, 21 Mar 2013 15:29:37 GMT

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.

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

OttarViken_Valvåg — Sun, 12 Dec 2021 01:13:29 GMT

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 + "...");
}

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

SebastienPelletier — Sun, 12 Dec 2021 01:13:32 GMT

After 5 years now, this problem is still present 
and your workaround does not work with the version 3.22

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

SebastienPelletier — Fri, 24 Nov 2017 20:21:54 GMT

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