Movable popup window in ArcGis Online

[EricSvensen]

The popup window in arcgis online cannot be moved.  It often pops up in a location that won't allow me to see the feature.  It would be useful to be able to move it out of the way.

[entegroIreland]

nearly 7 years has passed since the idea ...

[Anonymous User]

Just as important is that it resizes to fit content width and perhaps height; and also has a little resizing handle in the lower-right corner to let users resize it.  Full HTML/CSS including as generated by Arcade would also be great.  And I am wondering why this is "Under Consideration". Should it be In Plan, no?

I have another idea I will create separately. Tabs.  Users do not notice the next/previous < > buttons in the titlebar. Almost ever. Sure it seems obvious when you see it but I've trained hundreds of users including many professionals like engineers, surveyors and planners.  They just don't see it or notice it.

Here is my Idea - vote for it if you like it!  https://community.esri.com/ideas/16719-popup-interface-design-tabs-to-page-through-multiple-features

Users do not 'see' the previous/next feature buttons < > in the popup title bar.  They understand once they see it. But, they never notice it.  I found that a bit surprising but I think perhaps because the controls are so small with no color or texture that could be why they are not discoverable.

Here are my mockups for what I would like to see.

One layer, multiple features - current interface:

How I would like to see it:

Yes, huge buttons. Or let us customize dang popup CSS/HTML.  Or I will just intercept it in my custom CSS. Anyway I recommend large buttons and let us decide how to label the buttons because some layer names are kinda long and would be too much to cram in there (like my layer is really named Property Boundaries (Parcels) but I'd change to just Parcel 1, Parcel 2 etc)

Now with multiple layers, let's say Parcels, Streets and Trees, it's currently the same as above. How I'd like to see it:

As to number of features, could leave in the titleBar or put right below the feature selector buttons with an <hr> below it.

Now of course it's possible to customize this and do it yourself. For example in 3.x (used by WAB) - https://developers.arcgis.com/javascript/3/jssamples/widget_infowindowchart.html and https://community.esri.com/thread/106181

While the 4.x < > feature buttons are a little more prominent I still think they will not be noticed.

So, while we can add this for a custom template...I don't envision doing this for all my layers in all my viewers.  And I always turn on all popups for all visible layers in all my viewers. (Something else that would probably a good thing for Esri to consider as a programmer's option, for now, it requires hacking layerinfos module in WebApp Builder). 

It would be good to add this concept in to the default interface for the Next-Generation ArcGIS Online web map "Map Maker".

Other items needed for popups that are well-known:

1. moving popup  (easy enough to implement, see https://community.esri.com/thread/161401#comment-750577 etc -  but would be good to support by default)

2.  popups that auto-resize to fit content, and have a resizer handle in the lower-right corner for users to resize on their own  https://community.esri.com/ideas/4590

3. Support full HTML and CSS to allow us to design the popup better and leverage Arcade to generate CSS and HTML on the fly so it will render in the popup.  Would allow attributes to affect the HTML and CSS via Arcade, very powerful. Example: based on the type of color a fire hydrant, could change the background color of the popup DOM node. Just a random example to give an idea. 

4.   show related records directly within the popup

5. show attachments in the popup

[RogerMesen-Delgado]

Need this! 😃

[AndresCastillo]

Hi Kevin, could you post your code to maximize and minimize the popup window please?

edit:

Also, it seems like the maximize docks the popup to the side of the screen?

Or is it different than docking?

[AndresCastillo]

Hi Kevin, 

I do not see the semi-transparent popup you mention.

How can I see those popups on your page?

could you post your modifications to the css to make it semi-transparent please?

[Anonymous User]

Hi Andres, here it is. Click anywhere on the map to see the popup. 0.91 in contentPane is the transparency.  I also make them a little wider and give it an alternating grey shading for legibility:

            .contentPane {
                background-color: rgba(249,249,249,0.91) !important;
                width: 430px !Important;
                max-height: 410px!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;
            }

            


‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[AndresCastillo]

Thank you Kevin,

which css file did you modify, and how did you you know to modify that one (maybe by inspecting the popup element in the browser dev tools)?

how come line 3 has a capital 

!Important

What is the purpose of 

!important

[Anonymous User]

important just makes sure the CSS takes effect. The important tag trumps any other classes that are being applied. There is a hierarchy of specificity for CSS: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity  It is best not to over-use the tag, though, as it becomes a battle of dueling important tags. The capital is just my inconsistency, it should be lower case.

[Jacovan_der_Quast]

Great idea.

[SeanO_Boyle]

We need to to be able to resize and/move popups whether they are in AGOL or Enterprise webmaps, webapps etc.