Custom HTML in New Map Viewer

[mpboyle]

I saw the most recent update to the new Map Viewer in AGO supports custom HTML, however I've noticed that in-line styling doesn't seem to work as expected if I'm using a table element.

Below is an example.  If I try to add a second style to the in-line style, setting the font color to red, this style does not hold and disappears when I go back to look at the HTML view.

1 - Add the style

2 - View the custom pop-up --- font color is not red.

3 - Look at the custom HTML again --- the color tag is no longer there.

It does seem to work as expected for other elements though, for example, divs, as shown below.  Is there any reason that table are treated differently?  Is it because they are automatically placed within a <figure> element?

[SFM_TravisBott]

@mpboyle are you able to actually save edits in the HTML editor in the New Map Viewer? I found your thread because I am trying to update maps to the new viewer and don't seem to have the option to save edits in the HTML mode when configuring pop-ups. I can manipulate the text but the save button is greyed out. 

[Anonymous User]

Hi @SFM_TravisBott Thanks for the post - after making changes to the HTML, select the Source button again to preview your changes and save. 

@mpboyle style is a supported attribute for the td tag (https://doc.arcgis.com/en/arcgis-online/reference/supported-html.htm), can I get a case started with support to investigate this further? 

As a workaround can you try including a span element within the td element and specify the desired color there?

<td style="text-align:center;">
<span style="color:#d98a81;"><strong>Species</strong></span>
</td>

[mpboyle]

@Anonymous User :

Below are some screenshots from a test:

1) The custom HTML shown in Notepad++ for readability

2) The custom HTML copy/pasted into the pop-up (bracketed in green)

3) If I click OK to accept the pop-up, then go back in to edit the custom HTML, this is what I see, a couple things of note:

• The table is automatically wrapped in a <figure> element
• The "color: red" attribute from the first <td> element is missing
• The "font-weight: bold" attribute has been automatically re-assigned to <strong>
• The "color: yellow" attribute from the second <td> element is missing
• The "font-size: 18px" attribute from the second <td> element is missing

[Anonymous User]

Thanks @mpboyle - here are answers to your above questions from @LaurenBallantyne :

• The table is automatically wrapped in a <figure> element
  • This is expected, since the rich text editor in Map Viewer meets HTML5 standards and conventions. <figure> is used to define self-contained content, and you will most commonly see <figure> wrapped around all tables and images.
• The "color: red" attribute from the first <td> element is missing
  • This is a bug that we’re looking to fix for 10.1, but for now the workaround is to specify the <td> or <th> text color in a <span> tag around the cell value
• The "font-weight: bold" attribute has been automatically re-assigned to <strong>
  • This is expected behavior with the Map Viewer’s text editor. The text will still appear bold with <strong>.
• The "color: yellow" attribute from the second <td> element is missing
  • Same as the above for style = “color:red” on <td>
• The "font-size: 18px" attribute from the second <td> element is missing
  • This is a bug that we’re aiming to address for the next release, just like the color on <td> and <th>. The workaround is also to wrap the <td> or <th> text in <span> and apply the font-size within <span>

Thanks,

-Peter 

[DavidColey]

Hi @mpboyle , @Anonymous User  - I am having some trouble with the HTML editor since the March 2022 ArcGIS Online update.  When I try to edit the popup using the HTML editor, the 'OK' to save does not work - it just sits there greyed out.  Are either of you experiencing this?

thanks-

[mpboyle]

I honestly haven't tried using the new map viewer since I encountered all the issues I was having in the custom HTML pop-up I listed above.  Any web maps I create where I want to use custom HTML in the pop-up, I use the classic map viewer.

[DavidColey]

ok thanks Matt.  Can I ask if you have had any success trying to use html tags in the new rich text element?  seems something simple like this:

var email = $feature.email;
return {
type : 'text',
text : `<a href=mailto:${email}>Send email</a>` //this property supports html tags
}

doesn't seem to work, at least for me.

@Anonymous User 

[DavidColey]

Geez, as soon as I posted this I discovered that the element was only erroring out in the Test and Console Log.  It works as expected in the popup . . .