Change the size of a pop-up in Web AppBuilder for ArcGIS (Developer Edition)

Summary

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

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

Procedure

There are two ways to customize the size of a pop-up window in a web map. Choose one of the following methods to customize or set the pop-up window to a definite size.

Set the pop-up window to a definite size

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() of the script.

this.map.infoWindow.resize(360,280);

Note:
Refresh the web app to save the changes.

The following images illustrate the different sizes of the default and customized pop-up windows.

Image of the default pop-up window.

Image of the customized pop-up window.

Set the pop-up window to fit the size of the content automatically

Edit the jimu.css file in the app folder (install DIR\server\apps\userApp\jimu.js\css), and add the .esriPopup function in the styles pane, as shown in 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 size of the pop-up window.