Controlling position of popup's actions?

Question

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:

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

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?

Answer 1

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").

Answer 2

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.