HTLM <br> 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 <br> 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"

[JessicaRamirez1]

try <br />

[MatthewDriscoll]

<br/> does not work either. 

[MatthewDriscoll]

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

If you use the code below, the last part "<br><b>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",

[LaurenBoyd · Accepted solution]

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 <br> is respected in the title of the popup: https://codepen.io/laurenb14/pen/xxmKWvJ?editors=1000

[MatthewDriscoll]

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

It should look like this:

Before new line.         not      Before new line.

After new line.                         After new line.

[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.   

[LaurenBoyd]

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

[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!

[JeffreyThompson2]

If you are already writing your own HTML, why not give them a new class?