Auto-size/Customize width of ArcGIS.com map popups

19219
40
11-04-2011 05:58 AM
Status: Open
OwenGeo
Esri Notable Contributor

When longer field/alias names are user they do not work very well since the pop-ups are a fixed size.  Can the pop-ups be auto-sized to ensure the entire field name AND the values are visible?

0EM30000000CtLq

40 Comments
JustMapSynch

I think we're operating at different levels here.  If you helped put together that SAGIS map you linked, I know we are.  Wow. That is a seriously functional site.

But how did you simply make the box wider?   The whole premise of this thread is that we want to be able to and can't - unless we are hosting our own customized code on our own server.

by Anonymous User

Yep I'm the app designer and server admin!  I used WebApp Builder Developer Addition and injected CSS and HTML to over-ride the popup, so yes it is hosted on premise. I agree with you though!! Would be nice if it was a built-in design capability. And in fact if users could also resize with a little resizer handle in the corner that would be sweet.  To auto resize,  I would recommend Esri leverage CSS Grid, as it is a standard. I also used it to design our page here...  using Grid and Cards and MD Bootstrap:  SAGIS     

SebMartin

Hi Kevin,

I would like to know which files you had to edit. I am using the Web App Builder for Developer as well. I have been trying to edit the jimu.css and the mapmanager.js, but both unsuccessfully. Thanks for your help.

SebMartin

I have found a solution. Need to find and edit the jimu.js/jimu-theme.css file.

I have added the following code to make it work.

.esriPopupWrapper .sizer{
width:350px !important;
}
by Anonymous User

seb martin yep indeed, that's the same I did, and contentPane. I did the following, below.  And to get alternating row colors I did odd/even CSS for the background-color:


.contentPane {
background-color: rgba(249,249,249,0.91) !important;
width: 430px !Important;
}

.esriPopup .sizer {
width: 430px !Important;
}

.esriViewPopup table > tbody > tr:nth-child(even) {
text-decoration: none !important;
font-style: normal!important;
}

.esriViewPopup table > tbody > tr:nth-child(odd) {
background-color: #e0e0e0 !important;
text-decoration: none !important;
font-style: normal !important;
}

.esriViewPopup a:link, .esriViewPopup a:visited, .esriViewPopup a:hover, .esriViewPopup a:active {
text-decoration: none !important;
font-style: normal !important;
}

.esriViewPopup table tbody > tr > td:nth-child(4), .esriViewPopup table tbody > tr > td:nth-child(1) {
padding-left: 6px !important;
}

by Anonymous User

Well we are now in 2019, can we assume that the popup config project you mentioned is part of the larger Web Map re-engineering project to use the 4.x Javascript API, that will allow for group layers etc?

Thanks

BenVan_Kesteren1

Any update on this Owen Evans‌??

OwenGeo

Sorry, I don't have any specific information about that project, but I believe Evan M. is probably correct.

JustMapSynch

I was tinkering (well, groping) with the beta of the new Story Maps app creation thinga-magig.  I clicked on my map and up popped a fat, beautiful, legible popup.  It had better than four times the surface area of Pro's or AGOL's normal default size.  It scales dynamically with the browser window size.  And it's sensibly placed to the left side of the map frame so it doesn't obscure the part of the map you are focused on, and is still visible even when your map is being viewed on a smallish screen. 

by Anonymous User

I agree. I have been conducting user testing for Operation Dashboard and found that many users would like to see a larger pop-up window to more easily read project information. Is there anyway to increase the pop up size in a web map that is rendering in Operation Dashboard?