How do I edit pop-up size and location?

28488
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
ChrisSergent
Regular Contributor III

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.

BrandonKeinath1
Occasional Contributor III

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

0 Kudos
TimWitt2
MVP Alum

Brandon,

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

Tim

0 Kudos
BrandonKeinath1
Occasional Contributor III

Hi Tim,

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


Brandon

0 Kudos
ChrisSergent
Regular Contributor III

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.

BrandonKeinath1
Occasional Contributor III

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

0 Kudos
ChrisSergent
Regular Contributor III

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

BrandonKeinath1
Occasional Contributor III

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

ChrisSergent
Regular Contributor III

No problem. We all know how busy developers are.

0 Kudos