AnsweredAssumed Answered

Attribute cut off in custom popups, are there guidelines for HTML in popups for collector maps?

Question asked by robert.blash on Oct 18, 2018

Essentially a 2 part question:

Are there any general guidelines for custom HTML popups designed for collector use? 

 

I'm having a particular issue. I use custom popups in collector so I can display a few hyperlinks at the top, and attributes  in an html table below. However, the html table is wider than the containing element due to a long file path, which is then cutting off the text (see screen shot). I've tried a few combinations of width styling (and none at all) but I'm getting the same result. FWIW the same text wraps in the "default" popups. Any ideas?

 

In the past I've seen the suggestion to add the "attrname" and "attrValue" classes to the table cells, but those attributes are not supported for <td> elements:

Supported HTML—ArcGIS Online Help | ArcGIS 

 

Here's my HTML for reference:

<a href="www.esri.com" target="_blank">Esri</a>

<br /><br /><div style="width: 99%;border-bottom: 1px solid #ddd;"></div>
<table class="attrTable" style="vertical-align:middle; max-width: inherit;"><tbody>
<tr><td style="color: #888888;font-family: Arial;font-size: .85em;padding: .25em;">DataSourceType</td></tr><tr><td style="color: #333333;font-family: Arial;font-weight: 500;border-bottom: 1px solid #ddd;padding: .25em;">{DataSourceType}</td></tr>
<tr><td style="color: #888888;font-family: Arial;font-size: .85em;padding: .25em;">DataSourceReference</td></tr><tr><td style="color: #333333;font-family: Arial;font-weight: 500;border-bottom: 1px solid #ddd;padding: .25em;">{DataSourceReference}</td></tr>
<tr><td style="color: #888888;font-family: Arial;font-size: .85em;padding: .25em;">SurveyDate</td></tr><tr><td style="color: #333333;font-family: Arial;font-weight: 500;border-bottom: 1px solid #ddd;padding: .25em;">{SurveyDate}</td></tr>
<tr><td style="color: #888888;font-family: Arial;font-size: .85em;padding: .25em;">SurveyID</td></tr><tr><td style="color: #333333;font-family: Arial;font-weight: 500;border-bottom: 1px solid #ddd;padding: .25em;">{SurveyID}</td></tr>
<tr><td style="color: #888888;font-family: Arial;font-size: .85em;padding: .25em;">DataConversionNotes</td></tr><tr><td style="color: #333333;font-family: Arial;font-weight: 500;border-bottom: 1px solid #ddd;padding: .25em;">{DataConversionNotes}</td></tr>
<tr><td style="color: #888888;font-family: Arial;font-size: .85em;padding: .25em;">VerticalDatum</td></tr><tr><td style="color: #333333;font-family: Arial;font-weight: 500;border-bottom: 1px solid #ddd;padding: .25em;">{VerticalDatum}</td></tr>
</tbody></table>

Attachments

Outcomes