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; } } }

HTLM in popup broken in 4.27 in title

MatthewDriscoll

I am upgrading some web maps using the JavaScript API to 4.27. The use of HTML is not working in the title with this release. No problems in the content. Any work around?

"<b>Trail:</b> <br><b>City:</b> <br><b>Cross Street:</b> <br><b>Parking:</b> <br><b>Elevation:</b> ft"

Find more posts tagged with

Accepted answers

LaurenBoyd

Hi @MatthewDriscoll -

This does seem to be an issue in production at 4.27. We refactored the Popup in the next release (4.28) and it seems that this issue has been fixed. Could you please test your application with the next CDN to check that it is fixed? https://github.com/Esri/feedback-js-api-next/tree/main

Here's an example application using the next CDN showing the is respected in the title of the popup: https://codepen.io/laurenb14/pen/xxmKWvJ?editors=1000

All comments

MatthewDriscoll

FYI featureMenuOpen does not work in 4.28. Since the documentation is not out for 4.28 I am not sure if this is changing.

view.openPopup({
        features: searchResults,
        featureMenuOpen: true,
      });

MatthewDriscoll

Got it. I will comb through my code and figure out how I did this in 4.21 and what changed in the current version. How do I bold only some of my title in 4.28? If the default is bold, do I need to change the css font weight to normal? If so do you know the selector?

Yep. I had changed the font weight in the CSS. All is good on 4.28. Thank you for taking the time to help me!

LaurenBoyd

Popup titles have always been bolded by default to provide visual hierarchy. So you don't need the tag in the title. However, content in the popups should respect the tag.

MatthewDriscoll

This behavior seems to happen anytime there is more then one HTML tag. I just tried it with a simple table with similar results. If I put a table header and table cells/rows, by default headers are bold and cell/row are not. But within the title of popups in esri javascript api it all takes on the bolding.

MatthewDriscoll

This fixes the new line. But the bold is messed up. "Before new line. After new line." After new line should not be bold. It's bolding everything, inside and outside of the .

It should look like this:

Before new line. not Before new line.

After new line. After new line.

LaurenBoyd

Hi @MatthewDriscoll -

Here's an example application using the next CDN showing the is respected in the title of the popup: https://codepen.io/laurenb14/pen/xxmKWvJ?editors=1000

MatthewDriscoll

After more testing, if I take out the bold it works. Some sort of bug?

If you use the code below, the last part " Elevation: ft" will show up on line one with "Road Information"

title: "Road Information <br> Trail:<br>City: <br>Cross Street: <br>Parking: <br><b>Elevation: ft",

MatthewDriscoll

does not work either.

JessicaRamirez1

try

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.