English

How To: Change the size of a popup in Web AppBuilder for ArcGIS

Summary

In a web map, a popup is associated with the infoWindow class and is often used to display information about a selected feature. Often this popup has no distinct size, as this property is not programmed initially within the script. For more information on popups, refer to the following web help document: ArcGIS API for JavaScript: Class: Popup

The instructions provided describe how to change the size of a popup in ArcGIS API for JavaScript.

Procedure

There are two ways to customize the popup window size in a web map. Use one of the following steps to customize and set a definite size to the popup window.

  • Set a definitive size of a popup window

Edit the MapManager.js file in the user app folder (install DIR\server\apps\userApp\jimu.js), by inserting the following line at the end of the resetInfoWindow: function() method of the script.
resetInfoWindow: function() { 
...
...
this.map.infoWindow.resize(360,280); 
}
Note:
Refresh the web app for the changes to take place.
The following images illustrate the difference between the default popup window size and after the code is implemented.
Before
Picture of default popup window size
After
Picture of modified popup window size
 
  • Set the popup window size to fit the content automatically

Edit the jimu.css file in the app folder (install DIR\server\apps\userApp\jimu.js\css) using the .esriPopup function in the styles pane using the following code snippet.
.esriPopup.light .esriPopupWrapper {
 
    position: initial!important;
}

 .esriPopup .sizer {
 position: initial !important;
 width: 100% !important;
 }
The following image illustrates the effect of the code on the popup window.
The picture of modified popup window size in scenario 2

Related Information