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?

[AmyKnight]

Hi Brandon-  I was wondering if you figured out how to move the pop-up window or change the leader length?  I have tried to follow the suggestions here (among other things) but was unsuccessful, and I'm not an experienced developer.  Thanks

[StanMcShinsky]

This is probably not very helpful but it may get you thinking in the right direction. The leader line for the popup is part of the api as css. In order to change it you need to add  your own css. for example you can add it here:

server\apps\4\themes\FoldableTheme\common.css or any other place you see fit.

.esriPopup .pointer.top {
  background: red;  /*change this*/
  display: block;
  left: 50%;
  top: -8px;
  margin-left: -8px;
}


.esriPopup .pointer, .esriPopup .outerPointer {
  background: red;  /*change this*/
  display: none;
  height: 16px;
  position: absolute;
  width: 16px;
  z-index: 0;
  transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  box-shadow: 0 0 0.75em #777777;
  -webkit-box-shadow: 0 0 0.75em #777777;
}

All this does is change the little arrow (box turned 45 degrees to make the diamond) to red. What it does not do is move the popup over so you can make a longer leader line.

-Stan

[BrandonKeinath1]

Hi Stan,

I found the common.css file in my application but it only has one line

@import url("panels/TabPanel/style.css");

Are you suggesting I just add in the code you posted in order to make a change?  I think I've also decided it won't be enough to increase the leader length because it will almost certainly still cover up something the user wants to see.  Is there a way to make it movable by the user?  Perhaps by changing the position: absolute value you show?

Thanks,

Brandon

[StanMcShinsky]

Brandon,

Yes you can add those lines in that same file. I agree it would be nice to move the popup. not sure yet how to do it.

-Stan

[AmyKnight]

Stan-  Thank you!  It is helpful.  I am eager to learn everything I can.  I could see through inspecting that the .Pointer was the thing but was not able to find the css that contained it.  Now I understand that modifying the shape or size of the pointer does not help move the pop-up container.  Still,  I'll experiment with the code you've provided.  Thanks again-

[BrandonKeinath1]

Hi Amy,

Not yet no.  I'm not an experienced developer either so hopefully we'll both learn something that's helpful from these other wonderful folks.

Brandon

[TylerDunn2]

Hey Amy, not sure if you're still looking for a solution but I just posted it over here:

https://community.esri.com/message/596061#comment-596061

[Anonymous User]

If you have access to the code the pop-up and map infowindow have methods for changing size and position:

Popup | API Reference | ArcGIS API for JavaScript

InfoWindow | API Reference | ArcGIS API for JavaScript

If you use map.infowindow.resize() you can change the height/width and probably find a clever way to programmatically check content size to do so -- I haven't tried that yet. To nudge it over you can use map.infowindow.show() and just add a bit right/left of the current position. The current location is available as map.infowindow.coords.

Hope this helps.

[KimSundeen__MP_]

Hi Sarah,

I was wondering if you could help me understand how to configure the Popup and InfoWindow code you mentioned in your answer. My goal was to modify the popup window to default to a specified size. Is this possible with the api references you listed? I'm sure it is, but I'm not sure which function or file to modify for my WAB files located: client\stemapp\jimu.js. Any tips? Thanks!

[RobertScheitlin__GISP]

Kim,

   The file would be the MapManager in the jimu.js folder. The resetInfoWindow function is where you will stick the code (line 28):

      resetInfoWindow: function(isNewMap) {
        if(isNewMap){
          this._mapInfoWindow = this.map.infoWindow;
          if(this._mapMobileInfoWindow){
            this._mapMobileInfoWindow.destroy();
          }
          this._mapMobileInfoWindow =
          new PopupMobile(null, html.create("div", null, null, this.map.root));
          this.isMobileInfoWindow = false;
        }
        if (window.appInfo.isRunInMobile && !this.isMobileInfoWindow) {
          this.map.infoWindow.hide();
          this.map.setInfoWindow(this._mapMobileInfoWindow);
          this.isMobileInfoWindow = true;
          this._mapMobileInfoWindow.on("show", lang.hitch(this, function(){
              require(['dojo/query'], function(query) {
                //Maximize popup
                html.setStyle(query(".esriPopupMobile")[0], "display", "none");
                html.setStyle(query(".esriMobileNavigationBar")[0], "display", "block");
                html.setStyle(query(".esriMobileInfoView.esriMobilePopupInfoView")[0], "display", "block");
              });
          }));
        } else if (!window.appInfo.isRunInMobile && this.isMobileInfoWindow) {
          this.map.infoWindow.hide();
          this.map.setInfoWindow(this._mapInfoWindow);
          this.isMobileInfoWindow = false;
        }
        this.map.infoWindow.resize(400,300);
      },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍