How do I edit pop-up size and location?

25211
26
02-20-2015 05:09 PM
BrandonKeinath1
Occasional Contributor III

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?

26 Replies
AmyKnight
New Contributor III

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

0 Kudos
StanMcShinsky
Regular Contributor

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
Occasional Contributor III

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
Regular Contributor

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

0 Kudos
AmyKnight
New Contributor III

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
Occasional Contributor III

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

0 Kudos
TylerDunn2
Occasional Contributor

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

SarahClark
Occasional Contributor III

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_
New Contributor II

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!

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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);
      },