ArcGIS Online Custom Popups

PabloRios

Hi,

I try to create a custom popup to show symbology according availability on selected areas. It works in my webmap until i save and refresh. Then when i select in map, the code its corrupted and shows symbology plus some parts of the code. I found that the error is in the "<td class={}> because arcgis online is not support "class" attribute for "td" tags. Anyone help me what i need to replace "class" attribute in my code to solve my issue?

Attach the code that im using:

<style>
.Si {
display:block;
}
.No {
display: none;
}
</style>
<b><u>Pólizas Recomendadas</u></b>
<table border="0">
<tbody><tr>
<td class={SeguroVida}><img alt="" border="0" height="32px" src="https://s3.amazonaws.com/repositoriogmt/recursos/{SeguroVida}Warning.png" width="32px" />
</td><td class={SeguroVida}><b>Seguro de Propiedad </b></td>
</tr>
<tr>
<td class={Seguro_Sismos}><img alt="" border="0" height="32px" src="https://s3.amazonaws.com/repositoriogmt/recursos/{Seguro_Sismos}Earthquake.png" width="32px" />
</td><td class={Seguro_Sismos}> <b>Seguro de Sismo</b></td>
</tr>
<tr>
<td class={SeguroDeslizamiento}><img alt="" border="0" height="32px" src="https://s3.amazonaws.com/repositoriogmt/recursos/{SeguroDeslizamiento}Deslizamiento.png" width="32px" />
</td><td class={SeguroDeslizamiento}><b>Seguro de Deslizamiento</b></td>
</tr><tr>
<td class={Seguro_Inundabilidad}><img alt="" border="0" height="32px" src="https://s3.amazonaws.com/repositoriogmt/recursos/{Seguro_Inundabilidad}Flood.png" width="32px" />
</td><td class={Seguro_Inundabilidad}><b>Seguro de Inundabilidad</b></td>
</tr></tbody></table>

Thanks for your help!

deleted-user-pZlUMHhkW23Q

I experienced the same behaviour, from what I gathered anything that is not listed on this site Supported HTML—ArcGIS Online Help | ArcGIS will not work. As stated:

"HTML tags not listed in the table above are not supported and will be filtered out." 

So even if it "works" when you refresh the page everything that is not in that list will be rendered as plain text... To why <style> tags are filtered out, is beyond me.

This means <style> tags, <script> tags, CSS class tags are all not supported. The only way to get styles to work on your popup is inline CSS which means a lot of duplication of code to get the desired affect. If your going to go this route I would build the popup's first in an environment that fully supports CSS and then converts to inline CSS to be used in ArcGIS online, or you can use Arcade expressions as well to fill in the CSS style tags.

This site has a lot of good resources for tools helping you write inline CSS styles, CSS Inliner Tools Worth Considering for Your Next Email. You can go pretty far with this route setting up webpack scripts to generate your popups. But if you looking for something quick, the site mentions there are online tools for creating inline CSS like this one CSS Inliner Tool | Email Design Reference . Basically it allows you to write your HTML with CSS <style> tags then convert it to use CSS inline that can be used in a popup (remove the <style tags> though as no longer needed).

The main reason you would want to do this is it allows you to use CSS the way it was intended, to cascade the rules down to all the elements without having to type it all out manually as inline styles.

For Example: 

    This: Table style tag CSS Demo 

    Becomes: Table Inline CSS Demo

Unfortunately, at least at time of writing you can't use CSS pseudo elements like :hover, :after, :before etc as they don't work inline.

So something like this is currently not possible Table Pseudo Elements CSS Demo

Alternatively, you have to go the ArcGIS Developer Addition custom app route or Javascript API even though you just want to get some CSS styling in there but this is a lot over overhead to just get some basic CSS styling in a pop-up.

You wanted a banana (CSS) but you got a gorilla holding the banana 

Similar problem with <script> tags: AGOL Configure custom popup in new window with ... | GeoNet 

Other possibilities...

arcade-expressions/url-basic.md at master · Esri/arcade-expressions · GitHub 

arcade-expressions/project-phase.md at master · Esri/arcade-expressions · GitHub 

Making Your Pop-up Pop! 

Crafting custom attribute displays in pop-ups