1

Using the ArcGIS Server JavaScript API v4.12, how can I control the position of the popup's Actions pane?

To illustrate, see the sample at https://developers.arcgis.com/javascript/latest/sample-code/intro-popuptemplate/index.html

Click on a polygon at the top of the map, and the Zoom To option is shown at the top of the popup:

H

Now click on a polygon at the bottom of the map, and the Zoom To action is shown at the bottom of the popup:

enter image description here

How can I over-ride this default setting and force the position of the Zoom To action to the bottom of the popup, so it's consistently placed?

1
  • I've tried solving this via CSS but it's inconsistent since I can't figure out how the popup decides whether the put the Actions above or below the content. Sep 20 '19 at 6:44
3

There's two parts here:

  • The top/bottom position of the action bar vs the main content.
  • The location of the popup in relation to the selected feature.

You can change the latter from "auto" to e.g. "bottom-center" and then the "Zoom to" will always be on top. And vice versa for "top-center".

view.popup.alignment = "bottom-center";

https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Popup.html#alignment

This achieves the "consistently placed", but also hardcodes the popup location relative to the feature. That might be a potential drawback, or a feature you like (for increased "consistency").

1

The popup elements are layout using flex in a column. The actions element uses the CSS class called esri-popup__footer. You can force it to always be at the bottom by using the CSS flex rule "order: 1" for the class esri-popup__footer. That is what I have done.

1
  • This also works for docked popups.
    – wensveen
    Jul 8 '21 at 12:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.