Pop up webmap vs Pop up WAB

1012
1
Jump to solution
08-14-2017 03:42 AM
AnninaHirschi_Wyss1
Occasional Contributor III

Inspired by How To: Add an image at the top of pop-up windows in ArcGIS Online, I'm trying to configure a pop up (customised html attribute display).

The data contains several images (as online links), but not all features have all images to display. So I packed the img tag into an object tag, give a width-size and a title to the object:

<object data="{Layer1}" style="width:230px;" title="0-15m" type="image/jpg">
<img src="{Layer1}" />
</object>
<object data="{Layer2}" style="width:230px;" title="0-15m" type="image/jpg">
<img src="{Layer2}" />
</object>
...

It all works fine in the webmap, images are well aligned, no horizontal scrollbar, title shows up on mouse over and there is no "broken" image display (just a little empty space), if img src is empty:

      

Going to my web app (online Web AppBuilder launchpad theme), there are broken images (where src is empty), the width is ignored and the title doesn't show up. It seems that WAB doesn't recognise the <object>-tag.

     

Another solution would be to hide img tags with empty src with some css:

<head>
<style>
img[src=""] {
 display: none;
}
</style>
</head>

This even makes the empty space disappear in the web map pop up,

but displays in WAB like:

Finally this happens: I close the webmap completely, and open it again. Now the pop up is "messed" up like the one in WAB, and looking at the code, the <head> and <style> tags are gone and the img[src=""] is replaced by img[src=&quot;&quot;], and with the first solution, the <object> tags have vanished.

Guess I have to abandon this, but anyway thanks in advance for any hint,

Annina

Web AppBuilder for ArcGIS

0 Kudos
1 Solution

Accepted Solutions
AnninaHirschi_Wyss1
Occasional Contributor III

Funny, it seems the latest AGOL update brought some changes. At least, the broken image-icons are gone, and it looks as expected in the WebMap as well as in WAB. There is just some little more space, when an image is missing. The code is simply:

<img src="{Layer1}" style="width:230px"/>
<img src="{Layer2}" style="width:230px"/>
<img src="{Layer3}" style="width:230px"/>
...

View solution in original post

1 Reply
AnninaHirschi_Wyss1
Occasional Contributor III

Funny, it seems the latest AGOL update brought some changes. At least, the broken image-icons are gone, and it looks as expected in the WebMap as well as in WAB. There is just some little more space, when an image is missing. The code is simply:

<img src="{Layer1}" style="width:230px"/>
<img src="{Layer2}" style="width:230px"/>
<img src="{Layer3}" style="width:230px"/>
...