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?
Solved! Go to 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?
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?
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: "Arial","sans-serif"; 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: "Arial","sans-serif"; 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;">