topic Re: ESRI JavaScript API 4.x how to change height of popup? in ArcGIS JavaScript Maps SDK Questions

ESRI JavaScript API 4.x how to change height of popup?

IanPeebles — Thu, 18 Apr 2019 17:52:41 GMT

Hello everyone. I have successfully configured popups for my application. However, I am wanting to change the height of the popup. By default, the height is around 200px, but I want 300-350px.

I used the select elements in the developer tools, but still cannot change the height of the popup. This block of code does not work:

.esri-view-width-xlarge .esri-popup__main-container,
.esri-view-width-large .esri-popup__main-container,
.esri-view-width-medium .esri-popup__main-container
{
max-height: 300px !important;
}

The popup remains at this height:

Is there a wrapper I am forgetting about? I cannot seem to find the correct element.

Any guidance will be appreciated.

Re: ESRI JavaScript API 4.x how to change height of popup?

BirajaNayak — Thu, 18 Apr 2019 18:53:43 GMT

Hi Ian,

Please check the "dockOptions" property of popup.

Here is the API web help link:

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

Regards,

Biraja

Re: ESRI JavaScript API 4.x how to change height of popup?

IanPeebles — Thu, 18 Apr 2019 19:46:46 GMT

I actually figured out a solution. I used the following .css within the index.htm file:

.esri-view-width-xlarge .esri-popup__main-container,
.esri-view-width-large .esri-popup__main-container,
.esri-view-width-medium .esri-popup__main-container
{
max-height: 400px !important;
max-width: 300px !important;
}

I had to do this since I was referencing the following .css:

I was trying to reference the code block above within my own layout.css...but could not overwrite the code specified in the link above.

The result is this: