Pop-up not showing up on web as designed in ArcGIS Pro

[Anonymous User]

I designed a pop-up in Pro but only the first text box is displaying when shared to web. Please see images. 

Is there a way to share to web and have all text boxes/html within display?

[jcarlson · Accepted solution]

Pro and Web popups are not 100% compatible, sadly. The classic map viewer's popups only handle a single element. Even in the new map viewer, adding individual elements goes in a "vertical list" style. To create something similar to what you have in Pro, you'll need to do a lot more HTML customization within a single Text element.

Can you share the HTML of your popup?

[Anonymous User]

Thank you very much for your quick and informative response. I feared that this may be the case. My HTML is fairly rudimentary but the portions break down like this:

Header box:

<div>
<p align='center' style='text-align: center; line-height: normal; color: rgb(0,0,0)'><font size='5'><b>REPORT DATA DEFECT</b></font></p>

  <p align='center' style='text-align: center; line-height: normal; color: rgb(255,0,0)'><a href="LINK" target="_blank" rel="nofollow"><font color="red">Incorrect Value</font></a></p>
  <p align='center' style='text-align: center; line-height: normal; color: rgb(255,0,0)'><a href="LINK" target="_blank" rel="nofollow"><font color="red">Invalid Geometry</font></a></p>
  <p align='center' style='text-align: center; line-height: normal; color: rgb(255,0,0)'><a href="LINK" target="_blank" rel="nofollow"><font color="red">Missing Geometry</font></a></p>
 </div>

Name box: 

<div>
<p style='line-height: normal;'><b><span style='color: rgb(0,0,0); font-family: &quot;Arial&quot;,&quot;sans-serif&quot;; font-size: 16pt;'>{NAME}</span></b></p>
</div>

 Field name (pattern repeated for all field name boxes):

<div>
<p style='line-height: normal;'><b><span title='Hover Text' style='color: rgb(0,0,0); font-family: &quot;Arial&quot;,&quot;sans-serif&quot;; font-size: 12pt;'>Field_Name</span></b></p>
</div>

 Field value (pattern repeated for all field value boxes):

<p style='line-height: normal;'><font size='3'><b>{Field_Name}</b></font><br></p>

Image box:

{Field_in_table_that_contains_image_HTML}

 HTML in layer:

<img src="Link to Image" style="max-width:100%;height:auto;">