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

2066
2
04-18-2019 10:52 AM
IanPeebles
Regular Contributor

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.

0 Kudos
2 Replies
BirajaNayak
Esri Contributor

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

0 Kudos
IanPeebles
Regular Contributor

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:

<link rel="stylesheet" href="https://js.arcgis.com/4.11/esri/css/main.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: