nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

HTML not working in field

AndyKubrin

I'm trying to place the following code in a field:

<a target="_blank"
href="https://www.keepersofthewater.ca/water-monitoring-site-uar-e3"</a><button style="background-color: #1F77B5; color: white; font-size: 18px; padding: 18px; border:none;">View Site Photos, Water Monitoring Data & Traditional Knowledge</button>

It works fine when I run it in the W3Schools validator, but when I paste it into a field in my map, I get an error. Interestingly enough, the errors vary with each attempt. Sometimes the error says the HTML is not valid, sometimes it says the operation is not supported.

I've used HTML in a field before (using an <a> element like the one in the code above, and that worked all right. But something is glitching with the <button> element or some aspect of the styling.

Can anyone help?

Thank you.

Find more posts tagged with

Mapping

Accepted answers

f92k

button is not a supported HTML tag. See Supported HTML—ArcGIS Online Help | Documentation for supported tags and attributes.

A workaround is use a div tag and style it like a button. Here is an example largely copied from arcade-expressions/popup/Display Chip.md at master · Esri/arcade-expressions:

<div style="display:inline-block;height:8%;vertical-align:middle;background:blue;border-radius:25px;padding:5px 20px;text-align:center;margin: 2px;color:white;"><a href="https://github.com/Esri/arcade-expressions/blob/master/popup/Display%20Chip.md" style="color:white;text-decoration:none;">see example from esri</a> </div>

All comments

JeffSilberberg

I am not sure you have this constructed properly. Are you trying to present the User with a Button to click that will launch the URL specified in the <a> tag ?

Either move the </a> to the end of thline so that the <button> is inside the <a> tag,

Or you need to specify a Class in the <a> tag of type button. Getting the CSS in place may be a little harder.

https://stackoverflow.com/questions/8357058/how-to-make-an-html-anchor-tag-or-link-look-like-a-button

f92k

button is not a supported HTML tag. See Supported HTML—ArcGIS Online Help | Documentation for supported tags and attributes.

A workaround is use a div tag and style it like a button. Here is an example largely copied from arcade-expressions/popup/Display Chip.md at master · Esri/arcade-expressions:

<div style="display:inline-block;height:8%;vertical-align:middle;background:blue;border-radius:25px;padding:5px 20px;text-align:center;margin: 2px;color:white;"><a href="https://github.com/Esri/arcade-expressions/blob/master/popup/Display%20Chip.md" style="color:white;text-decoration:none;">see example from esri</a> </div>

BrandonGauchier

Thanks, @JeffSilberberg . Map Viewer accepted my code with the </a> tag at the end of the line, but the HTML rendered incorrectly in my embedded map. But @f92k's solution worked great, so I'm going with that.

BrandonGauchier

Thanks, @f92k, that worked great. Sorry for not posting sooner, but I was offline last week.

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.