Resizing a popup in 4.X

evtguy

In 3.X, this was quite simple as there was the infoWindow.Resize() method but there seemingly is not an equivalent option in 4.X? The closest thing I found was this thread where someone was using CSS to resize the popup. Unfortunately, this hasn't been working for me and I need to adjust the popup's dimensions a number of times, depending on the layer that was clicked.

In my attempt, I'm using reactiveUtil to watch for features being added to the popup:

		reactiveUtils.watch(()=>theView.popup.features, (event)=>{
		  // If the zoom-out action is clicked, fire the zoomOut() function
			//Attempt to resize the popup based on the layer
			if (event.length > 0) {
				var theLayerName = theView.popup.features[0].layer.id;
				switch(theLayerName) {
					case "tipLine":
						break;
					case "tipPoint":
						break;
					case "swmCip":
						break;
					case "schools":
						break;
					case "parcels":
						break;
					case "raceTracts":
						app.plmf.resizePopupWindow(925,500);
						break;
					case "raceBlockGroups":
						break;
					case "povertyTracts":
						break;
					case "povertyBlockGroups":
						break;
					case "lepTracts":
						break;
					case "lepBlockGroups":
						break;
					case "ageSexTracts":
						break;
					case "ageSexBlockGroups":
						break;	
					case "disabilityTracts":
						break;
					case "disabilityBlockGroups":
						break;	
					case "originTracts":
						break;						
					default:
				}
			}
		});

 

And then the function that is called to attempt to resize the popup is as follows:

	resizePopupWindow(theWidth,theHeight) {
		  var theCssWidth = theWidth + 'px !important';
		  var theCssHeight = theHeight + 'px !important';
		  
		  var cols = document.querySelectorAll('.esri-view-width-xlarge .esri-popup__main-container, .esri-view-width-large .esri-popup__main-container, .esri-view-width-medium .esri-popup__main-container');
				if (cols.length > 0) {
					  for(var i = 0; i < cols.length; i++) {
						cols[i].style.height = theCssHeight;
						cols[i].style.width = theCssWidth;						
					  }
				}
}

evtguy

I submitted an idea to get the resize method restored in the API but I finally have success using CSS. I'm still using the same approach as originally outline above but  my resizePopupWindow function has changed. I'm now using the setProperty method on the style property and that finally works:

 

	resizePopupWindow(theWidth,theHeight) {
		  var theCssWidth = theWidth + 'px';
		  var theCssHeight = theHeight + 'px';
		  var cols = document.querySelectorAll('.esri-view-width-xlarge .esri-popup__main-container');
				if (cols.length > 0) {
					  console.log('Adjusting the popup dimensions to ' + theWidth + ' x ' + theHeight);
					  for(var i = 0; i < cols.length; i++) {
						cols[i].style.setProperty("maxHeight", theCssHeight,"important");
						cols[i].style.setProperty("maxWidth", theCssWidth,"important");						
						cols[i].style.setProperty("height", theCssHeight,"important");						
						cols[i].style.setProperty("width", theCssWidth,"important");							
					  }
				}
	}

 

 

Hopefully that helps out someone else. I should note that the application I'm using this with is really designed for us in a desktop browser environment. I don't know about trying to use this approach under mobile device circumstances.