How do I edit pop-up size and location?

[BrandonKeinath1]

Does anyone know a way to edit the default size of a pop-up in javascript web app builder application?  The best would be to make it aware of the attributes and fit to size.  I'm also interested in how to make it move further away from the feature it is identifying.  Has anyone been able to do this?

[KimSundeen__MP_]

To both Robert and Sarah:

Thank you for this solution. I didn't realize it would be so simple. The only issue I had was that adding this line of code in the client folder of MapManager.js doesn't work. Whereas, placing this code in the server folder of the specific app does work. As I was researching this change, I found your thread from 2015, which now makes sense! https://community.esri.com/thread/12141. Thanks for brining it out again and helping me!

Do you know if there's a way to modify the resetInfoWindow function to be used for all apps? I didn't want to have to modify this code for all my apps. It would be more efficient if I could only modify it in one place. Thanks again.

[RobertScheitlin__GISP]

Kim,

  Sorry to say that for existing apps you will have to modify the MapManager in each but when you make that change in the stemapp the all NEW app will have the change. To explain... When a new app is created it copies the stemapp to a new folder like server/apps/[app #]. So because each app is a copy (snapshot) of the stemapp and not a direct link to it your changes to the stemapp have no effect on existing apps.

[KimSundeen__MP_]

Good to know.

[Anonymous User]

Hi Kim - I actually haven't worked with WAB, so my answer here is how I would go about it blind. If I personally had to jump in to find the right function/file I might do a search inside the main JS file for the "layers-add-result" event (text search in Notepad++ or other text editor). If I couldn't find that, I might search 'infowindow' or 'new Map' (where the map is initialized) and pop the code in after that block. I edit code in Aptana and there is a File Search capability that will search for text in an entire directory (ie you're not sure which JavaScript file has the Map functions). If you need to look through a lot of files that might be a good option -- I'm sure there are others.

In my own code it looks like this:

Main.js

on(map, "layers-add-result", function(e) {
     console.log("Layers loaded successfully.");
     // Infowindow
     map.infoWindow.resize(315, 150);
});‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[SteveCole]

I'm not sure you can adjust the length of the leader (the distance between the feature and the popup). I think the leaders are just images so they have a set size:

http://js.arcgis.com/3.13/esri/dijit/images/popup.png

[StanMcShinsky]

The leader lines are just css. A square box that is rotated 45 degrees and moved around based on location of the popup. The space of the popup from the item and the leader line are part of the esri javascript api. Not sure how to move the popup over though.

-Stan

[JOSE_LUISZAPATA_YGNACIO]

Un poco tarde para responder esto, pero para los que aun no lo saben eh aqui la respuesta:
How To: Change the size of a popup in Web AppBuilder for ArcGIS 
Saludos