topic Re: How do I edit pop-up size and location? in ArcGIS JavaScript Maps SDK Questions

How do I edit pop-up size and location?

BrandonKeinath1 — Sat, 21 Feb 2015 01:09:10 GMT

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?

Re: How do I edit pop-up size and location?

ChrisSergent — Mon, 23 Feb 2015 14:56:52 GMT

Your best bet may be to re-post the question here: Web AppBuilder for ArcGIS

or here: Web AppBuilder Custom Widgets

They are both good groups for Web App Builder questions.

Re: How do I edit pop-up size and location?

BrandonKeinath1 — Mon, 23 Feb 2015 15:02:00 GMT

Hi Chris,

I can certainly do that, but do you know a way to do it via code? Web App Builder is simply where the app is starting it's life. We have various code modifications once we've done the initial work in WAB and could easily hit the pop-up customization as well. I should have mentioned that we're using the web app builder developer edition to create the apps and then we serve them off of our ArcGIS Server so we have access to all of the code files.

Thanks,

Brandon

Re: How do I edit pop-up size and location?

TimWitt2 — Mon, 23 Feb 2015 15:05:26 GMT

Brandon,

we had some discussion about it here: WAB - popup box inconsistent sizes

Tim

Re: How do I edit pop-up size and location?

ChrisSergent — Mon, 23 Feb 2015 15:08:33 GMT

Are you familiar with running the Developer tools in Google Chrome? If so, you could right click and inspect the element. In the right hand pane, you can see the properties of the element including the styles for resizing. Look for the element ID. It's not always what you think it is, as the size may be in a container, but you can hover your mouse over different elements in the code to know which elements are affected and then examine the element's CSS in the pane. You could then edit the .css file by searching for that element and modify it's CSS or you could override it with your own CSS file. That's what I have done in the JavaScript API.

Re: How do I edit pop-up size and location?

BrandonKeinath1 — Mon, 23 Feb 2015 15:15:44 GMT

Hi Tim,

Thanks for the link. Looks like a recent diccussion too!

Brandon

Re: How do I edit pop-up size and location?

BrandonKeinath1 — Mon, 23 Feb 2015 15:22:24 GMT

Hi Chris,

Yes I have run the developer tools before. Some projects have worked better than others but I suspect that is my lack of knowledge rather than the tools themselves. I will do as you suggest and let you know if I run into trouble. I have another question that may have a similar answer. Is it possible to move the pop-up window or change the leader length? I can branch this into a new discussion if that would be more appropriate.

Thanks,

Brandon

Re: How do I edit pop-up size and location?

ChrisSergent — Mon, 23 Feb 2015 15:39:00 GMT

You could use top and left, to position the pop-up, but if there is no container, it will move it based on the entire web page. Sounds like you just want to move it a little further away, so I would add a container around the popup and then set the top and left position in then and make sure you have the pop-up set to absolute. That's a guess, but worth a try.

You could also take a look at the pop-up's positioning and move it as it may already be defined on position within a container already. If it is, that will make it easy, just change the numbers, probably top and left until they are where you want them to be. I am not sure what leader length is, but CSS does have a length property. As long as it is unique ID, you can change it in CSS. So I would go about finding the leader ID and search for the length; it could be set to auto, but you can change it pixels or px in CSS.

If you get stuck, and it's public, you may want to post a link to your site or if it's one page, post to JS Bin - Collaborative JavaScript Debugging

Re: How do I edit pop-up size and location?

BrandonKeinath1 — Mon, 23 Feb 2015 15:43:43 GMT

Thanks Chris,

I'll look for that as well. Thanks for the great information and I'll let you know how it goes. I don't think I'll be able to play with it until Thursday so don't think I'm ignoring you if I don't reply till next week.

Thanks again,

Brandon

Re: How do I edit pop-up size and location?

ChrisSergent — Mon, 23 Feb 2015 16:20:55 GMT

No problem. We all know how busy developers are.

Re: How do I edit pop-up size and location?

Anonymous User — Tue, 24 Feb 2015 17:13:45 GMT

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.

Re: How do I edit pop-up size and location?

AmyKnight — Mon, 27 Apr 2015 16:43:32 GMT

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

Re: How do I edit pop-up size and location?

StanMcShinsky — Sun, 12 Dec 2021 03:38:01 GMT

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

Re: How do I edit pop-up size and location?

BrandonKeinath1 — Mon, 27 Apr 2015 17:51:00 GMT

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

Re: How do I edit pop-up size and location?

BrandonKeinath1 — Mon, 27 Apr 2015 17:57:39 GMT

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

Re: How do I edit pop-up size and location?

StanMcShinsky — Mon, 27 Apr 2015 18:16:37 GMT

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

Re: How do I edit pop-up size and location?

AmyKnight — Mon, 27 Apr 2015 18:18:56 GMT

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-

Re: How do I edit pop-up size and location?

SteveCole — Mon, 27 Apr 2015 18:49:47 GMT

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

Re: How do I edit pop-up size and location?

StanMcShinsky — Mon, 27 Apr 2015 19:02:36 GMT

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

Re: How do I edit pop-up size and location?

TylerDunn2 — Fri, 18 Mar 2016 17:07:47 GMT

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