Rotate pop-up image based on rotation angle attribute

[Trisarahtops]

I am trying to get an image in a popup to rotate based on a rotation angle attribute. I accomplished this in ArcGIS Pro:

The symbol at the top is a transparent .png. I used HTML with embedded style to rotate based on the symbol rotation field:

Expression 1 above is a simple arcade expression that selects an image URL based on the symbol type that is clicked. "transform: rotate({SymbolRotation}deg);" correctly rotates the image.

However, I cannot get this to work in ArcGIS Online. The image displays, but is not rotated:

When I copy/pasted the same HTML code that I used in ArcPro, it changed it to this:

The rotation style is still in there, but it doesn't work.

Help?

[ChristopherCounsell]

I don't believe rotate is supported in ArcGIS Online.

https://doc.arcgis.com/en/arcgis-online/reference/supported-html.htm

[Trisarahtops]

Thanks, that is what I was guessing. However, "rotate" is CSS code within the style attribute. The page you linked says that the style attribute is supported within an image tag, but it does not say which version of CSS is supported within the style attribute. I am having trouble finding that information.

[ChristopherCounsell]

It's limited to an older version of html and I don't believe CSS is supported nor could find anything to suggest it is.

Here's an idea asking for html 5 and CSS

https://community.esri.com/t5/arcgis-online-ideas/arcgis-online-popups-support-html5-syntax-like-css...

If I recall, some web apps have limited support for CSS design on a theme level, but otherwise you don't see it much through the ArcGIS online UI.

[Trisarahtops]

Thanks for sharing that idea link. The confusing thing is that some of my CSS styling seems to be working, but the image rotation isn't. Here's an example of some CSS styling that works. The popup is on the left and the HTML/CSS is on the right.

I assume that you are correct, the rotation style simply isn't supported. I just wish that information was listed somewhere.

[ChristopherCounsell]

It's more the case of what is supported is in the documentation, which is
html tags, in the context of text editors and pop-ups. Div and style
attributes are there.

Other parts of the platform that support CSS clearly state it is supported
E.g.

https://doc.arcgis.com/en/hub/sites/customizing-sites-with-html-and-css.htm

I don't think you need a documentation page to state that CSS is not
supported in popups. What you should use are the supported html tags. Often
where things work, but aren't officially documented or supported, you can
run into issues. e.g. it might stop working or not work in all clients.