ArcGIS Javascript 4.10 Popup Maximum Height

DionLiddell

Hi,

This question is specific to the Popup class within the ArcGIS API for Javascript 4.10. It appears that the maximum size of a non-docked popup (with custom content) might be 460px wide and 300px high. I'm trying to eliminate vertical scrollbars that appear when the maximum size of a popup is reached, and I think that increasing the maximum height of popups is the best way to do this. Is there a way to increase the maximum height of popups?

Thanks,
Dion

DionLiddell

Modifying the max-height attribute of esri-popup__main-container appears to do the trick.  Is there (or is this) an official way to increase the maximum height?

Update - the style below stopped working, but this community answer fixed the problem.

 

<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>link</SPAN> <SPAN class="attr-name token">rel</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>stylesheet<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">href</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>https://js.arcgis.com/4.10/esri/css/main.css<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>
<SPAN class="language-css style token"><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>style</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
  <SPAN class="selector token">.esri-popup__main-container</SPAN> <SPAN class="punctuation token">{</SPAN>
    <SPAN class="property token">max-height</SPAN><SPAN class="punctuation token">:</SPAN> 600px<SPAN class="punctuation token">;</SPAN>
  <SPAN class="punctuation token">}</SPAN> 
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>style</SPAN><SPAN class="punctuation token">></SPAN></SPAN></SPAN>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>