@TimothyKing2, glad to hear you are enjoying ArcGIS Solutions. This issue you are seeing is because this pop-up was originally designed in the Classic Map Viewer (before the new Map Viewer existed). Now when editing in the new map viewer that are changes being made to the html that is breaking the pop-up.
Below is some updated html that will work in the new Map Viewer. Copy the html below and when you edit the Text element in the pop-up click the Source button to view the HTML source. Paste the html below, click the source button and then click OK.
<div style="max-width: 750px; padding: 0px 4px">
<font size="5" style="color:#1987bb;">{projname}</font>
<p><b>Project ID:</b> {projid}</p>
<table style="margin:8px -6px;border-collapse: separate;border-spacing: 6px 4px;table-layout: fixed;width:initial;">
<tbody>
<tr style="height:26px">
<td style="display:{expression/expr6}; background-color:#00734c; color:#ffffff; min-width:0%; max-width:100%; width:initial; text-align:left; vertical-align: middle; font-weight: normal; padding: 0px 6px;">On Budget</td>
<td style="display:{expression/expr7}; background-color:#a80000; color:#ffffff; min-width:0%; max-width:100%; width:initial; text-align:left; vertical-align: middle; font-weight: normal; padding: 0px 6px;">Over Budget</td>
<td style="display:{expression/expr8}; background-color:#00734c; color:#ffffff; min-width:0%; max-width:100%; width:initial; text-align:left; vertical-align: middle; font-weight: normal; padding: 0px 6px;">On Schedule</td>
<td style="display:{expression/expr9}; background-color:#a80000; color:#ffffff; min-width:0%; max-width:100%; width:initial; text-align:left; vertical-align: middle; font-weight: normal; padding: 0px 6px;">Behind Schedule</td>
</tr>
</tbody>
</table>
<p><b>Description</b><br />{projdesc}</p>
<div style="display:table; width:100%; text-align: center; font-weight: normal; margin:8px 0px; border-collapse: separate;border-spacing: 0px 8px;table-layout: fixed">
<div style="display:table-row;">
<div style="display:table-cell; width: 50%;"><font size="3">Fiscal Year</font><br /><font size="4" style="color:#1987bb;">{fiscalyr}</font></div>
<div style="display:table-cell; width: 50%;"><font size="3">Funding Source</font><br /><font size="4" style="color:#1987bb;">{fundsource}</font></div>
</div>
<div style="display:table-row;">
<div style="display:table-cell; width: 50%;"><font size="3">Estimated Cost</font><br /><font size="4" style="color:#1987bb;">${estcost}</font></div>
<div style="display:table-cell; width: 50%;"><font size="3">Actual Cost</font><br /><font size="4" style="color:#1987bb;">{expression/expr10}</font></div>
</div>
<div style="display:table-row;">
<div style="display:table-cell; width: 50%;"><font size="3">Estimated Start Date</font><br /><font size="4" style="color:#1987bb;">{planstart}</font></div>
<div style="display:table-cell; width: 50%;"><font size="3">Actual Start Date</font><br /><font size="4" style="color:#1987bb;">{expression/expr11}</font></div>
</div>
<div style="display:table-row;">
<div style="display:table-cell; width: 50%;"><font size="3">Estimated End Date</font><br /><font size="4" style="color:#1987bb;">{planend}</font></div>
<div style="display:table-cell; width: 50%;"><font size="3">Actual End Date</font><br /><font size="4" style="color:#1987bb;">{expression/expr12}</font></div>
</div>
</div>
<b>Phase</b>
<div style="min-width: 365px; display:table; margin:8px -6px; border-collapse: separate; border-spacing: 6px 4px; width: 100%; table-layout: fixed;">
<div style="display:table-row;text-align:center;" height="16">
<div style="background-color:{expression/expr2};display:table-cell;width:25%;"></div>
<div style="background-color:{expression/expr3};display:table-cell;width:25%;"></div>
<div style="background-color:{expression/expr4};display:table-cell;width:25%;"></div>
<div style="background-color:{expression/expr5};display:table-cell;width:25%;"></div>
</div>
<div style="display:table-row;text-align:center;font-weight:normal;" height="24">
<div style="display:table-cell;padding-left:0px;width:25%;">
PreDesign
</div>
<div style="display:table-cell;padding-left:0px;width:25%;">
Design
</div>
<div style="display:table-cell;padding-left:0px;width:25%;">
Construction
</div>
<div style="display:table-cell;padding-left:0px;width:25%;">
Closeout
</div>
</div>
</div>
<p><b>Status</b><br />{status}</p>
<p><b>Contact</b><br />{pocname}<br />{pocphone}<br /><a href="mailto:{pocemail}" rel="nofollow ugc">{pocemail}</a></p>
</div>
You will also need to update some of the attribute expressions. To do this in the Popup panel click attribute expressions in the pop-up panel and then click the Pre-Design expression. You will want to edit the expression and remove the two 'background-color:' references. So it will initially look like:
if ($feature.projphase == 'PreDesign') {
return 'background-color:#1987bb'
}
return 'background-color:#DDDDDD'
And you want it to look like:
if ($feature.projphase == 'PreDesign') {
return '#1987bb'
}
return '#DDDDDD'
Repeat this for the Design, Construction, and Closeout expressions. This should get the pop-up back to what it was originally in the solution and be compatible with the new Map Viewer.
