nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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

BjørnSandvik

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

popupbug.png

LeslieFountain_1-1632243926577.png

Encontre mais publicações marcadas com

Accepted answers

All comments

BjørnSandvik

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?

popupbug2.png

ReneRubalcava

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.

BjørnSandvik

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

popup.zip

BjørnSandvik

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

PaulBushore

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,

ShreyasVakil

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:)

BjørnSandvik

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

ShreyasVakil

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

ShreyasVakil

Hi Bjørn,

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

Thanks,
Shreyas

BjørnSandvik

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

Bjorn

ShreyasVakil

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

JohnGravois

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.

OttarViken_Valvåg

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

SebastienPelletier

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

wayfaringrob_0-1727108085126.png

SebastienPelletier

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

Participe da Conversa

Membros conectados podem postar, seguir atualizações e mais. Novo aqui? Registre uma conta gratuita.

Links Rápidos

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.