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

Question

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.

ipeebles · Answer

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:

BirajaNayak · Answer

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