ESRI JavaScript API 4.x how to change height of popup?
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.
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:
