topic Re: WAB - popup box inconsistent sizes in ArcGIS Web AppBuilder Questions

WAB - popup box inconsistent sizes

StanMcShinsky — Mon, 09 Feb 2015 16:40:32 GMT

I am using web Appbuilder v.1 and when I identify on multiple layers I get a popup box that has an arrow to cycle through the identified features.

The problem is that when I click on the arrow to go to the next identified result the size of the box changes and the next arrow moves either up or down. It looks like the box is adjusting its size from the center. So when you go from a big box to a small box the top and bottom condense towards the middle. I also noticed this same behavior on ArcGIS online.

Is there a way to only have the bottom slide up or to automatically have a set size so there is no adjustment on the box size as results are cycled through?

I have noticed this esri javascript example to kinda work the way I was thinking Popups with related records

It has the arrow pointing to the selected feature at the top of the popup. (as a side note it works once you got to the second selected feature)

Re: WAB - popup box inconsistent sizes

TimWitt2 — Mon, 09 Feb 2015 16:46:08 GMT

Hey Stan,

you are able to do that with a little bit of programming, but you would not be able to do that in ArcGIS Online.

InfoWindow | API Reference | ArcGIS API for JavaScript

I don't know where within the WebApp builder that code is though.

Tim

Re: WAB - popup box inconsistent sizes

StanMcShinsky — Sun, 12 Dec 2021 03:11:36 GMT

I really just want to do it in Web Appbuilder.

First off I did some more digging and I have found that this behavior is a result of the esri javascript api and not limited to AGOL or web appbuilder.

So I found that there could be two ways around this but not sure how to do either of them in WAB.

1. Use an anchor for the popup like:

Popup | API Reference | ArcGIS API for JavaScript

anchor: 'bottom-right'

as part of :

var popup = new Popup({
            fillSymbol: fill,
            titleInBody: false,
            anchor: 'bottom-right'
        }, domConstruct.create("div"));

The main problem with this is that the popup no longer becomes intelegent to what side of the point to place the popup so it dose not appear off screen. The good side is that the popup box adjusts from the bottom not the center anymore.

2. Use the resize(width, height) method like:

Popup | API Reference | ArcGIS API for JavaScript

popup.resize(300,200);

as part of:

var popup = new Popup({
            fillSymbol: fill,
            titleInBody: false
        }, domConstruct.create("div"));
        popup.resize(300,200);

I like the second option because it still acts smart and does not move the arrows if the size changes. The only down side is if the potential empty space for small popup boxes.

Any ideas how to implement either of theses two options or maybe third that I have not come up with?

fyi i tested the above code on this esri sample. Popup | ArcGIS API for JavaScript

Re: WAB - popup box inconsistent sizes

RobertScheitlin__GISP — Tue, 17 Feb 2015 14:38:01 GMT

Stan,

I have not tested this at all but my best guess would be to add the resize code to the resetInfoWindow function in the MapManager.js as the map components default info window is a Popup dijit.

this.map.infoWindow.resize(300,200);

Re: WAB - popup box inconsistent sizes

StanMcShinsky — Tue, 17 Feb 2015 15:30:34 GMT

Robert,

I just tried doing what you suggested and it did not work. I tried adding that line into several spots within the resetInfoWindo function and still no change.

Re: WAB - popup box inconsistent sizes

RobertScheitlin__GISP — Tue, 17 Feb 2015 15:35:11 GMT

Stan,

Sorry that was my best guess.

Re: WAB - popup box inconsistent sizes

WarrenMedernach — Tue, 03 Mar 2015 19:44:17 GMT

Thanks Robert, that worked for me. Is there any way the size of the popups can be set to automagically adjust to the size of the incoming content?

Thanks!

Warren

Re: WAB - popup box inconsistent sizes

RobertScheitlin__GISP — Tue, 03 Mar 2015 19:50:12 GMT

Warren,

I have not looked into that possibility.

Re: WAB - popup box inconsistent sizes

StanMcShinsky — Tue, 03 Mar 2015 20:45:27 GMT

Warren,

Could you share where you put this in the MapManager.js file?

Stan

Re: WAB - popup box inconsistent sizes

WarrenMedernach — Sun, 12 Dec 2021 03:11:39 GMT

Hey Stan,

I put it right at the end of the function. Also, note that I edited MapManager.js file in my app folder, NOT the MapManager.js file in the client\stemapp folder.

resetInfoWindow: function() {
        if (!this.previousInfoWindow && this.map && this.map.infoWindow) {
          this.previousInfoWindow = this.map.infoWindow;
        }
        if (!this.mobileInfoWindow && this.map && this.map.root) {
          this.mobileInfoWindow =
          new PopupMobile(null, html.create("div", null, null, this.map.root));
        }
        if (jimuConfig && jimuConfig.widthBreaks && this.previousInfoWindow &&
          this.mobileInfoWindow) {
          var width = jimuConfig.widthBreaks[0];
          if (html.getContentBox(jimuConfig.layoutId).w < width && !this.isMobileInfoWindow) {
            this.map.infoWindow.hide();
            this.map.setInfoWindow(this.mobileInfoWindow);
            this.isMobileInfoWindow = true;
          } else if (html.getContentBox(jimuConfig.layoutId).w >= width &&
              this.isMobileInfoWindow) {
            this.map.infoWindow.hide();
            this.map.setInfoWindow(this.previousInfoWindow);
            this.isMobileInfoWindow = false;
          }
        }
  // MOD - 2015-03-03
  this.map.infoWindow.resize(360,280);
      }

Hope this helps,

Warren

Re: WAB - popup box inconsistent sizes

StanMcShinsky — Tue, 03 Mar 2015 22:13:52 GMT

Warren Medernach

It looks like that works great. I must have been putting it in the wrong place. Thanks.

Stan

Re: WAB - popup box inconsistent sizes

LisaT — Wed, 09 Jun 2021 22:28:20 GMT

Hi, I would like to completely disable the mobile popup from my Enterprise Portal WAB apps. I can do this in my development environment by following what you say here, and other places, and edit the MapManager.js file to this.isMobileInfoWindow = true; as well as resize(). However, when i try to make those changes in Portal I see that the MapManager.js file is minified! This is making it hard for me to correctly change the resetInfoWindow function. I have added ";this.map.infoWindow.resize(300,200); at the end of the function and have also tried adding "this.isMobileInfoWindow=!0" in various places. It seems to have no effect. In looking at the chrome dev tool, I do not even see where MapManager is being used and so I cannot inspect it. Any ideas on how to change Portal to NEVER use the mobile popup? The mobile popup does not show actions, which causes a problem. If there is a way to add actions to the mobile popup that could be another solution...