topic Re: Popup table width formatting with conditional row display in ArcGIS Online Questions

Popup table width formatting with conditional row display

jayt70 — Wed, 15 Jun 2022 13:26:31 GMT

I am having trouble creating a table within a popup that has the following features:

- Selectively shows rows if a custom expression is not null

- Has consistent column width formatting.

How can I get Table 1 to look like Table 2?

Here is my code:

<p>
<span style="font-size:medium;"><font><strong>TABLE 1:</strong></font></span>
</p>
<figure class="table">
<table style="border-collapse:collapse;font-family:arial, sans-serif;text-align:left;">
<tbody>
<tr>
<th style="border:1px solid #ddd;padding:8px;">
Ministry
</th>
<th style="border:1px solid #ddd;padding:8px;">
URL
</th>
</tr>
<tr style="display:{expression/expr23};">
<th style="border:1px solid #ddd;padding:8px;">
Children's Ministry
</th>
<th style="border:1px solid #ddd;padding:8px;">
<a href="{Childrens_Link}"><strong>Link</strong></a>
</th>
</tr>
<tr style="display:{expression/expr23};">
<th style="border:1px solid #ddd;padding:8px;">
Youth Ministry
</th>
<th style="border:1px solid #ddd;padding:8px;">
<a href="{Youth_Link}"><strong>Link</strong></a>
</th>
</tr>
<tr style="display:{expression/expr23};">
<th style="border:1px solid #ddd;padding:8px;">
Women's Ministry
</th>
<th style="border:1px solid #ddd;padding:8px;">
<a href="{Womens_Link}"><strong>Link</strong></a>
</th>
</tr>
</tbody>
</table>
</figure>
<p>
<br>
 
</p>
<p>
<strong>TABLE 2:</strong>
</p>
<figure class="table">
<table style="border-collapse:collapse;font-family:arial, sans-serif;text-align:left;">
<tbody>
<tr>
<th style="border:1px solid #ddd;padding:8px;">
Ministry
</th>
<th style="border:1px solid #ddd;padding:8px;">
URL
</th>
</tr>
<tr>
<th style="border:1px solid #ddd;padding:8px;">
Childrens
</th>
<th style="border:1px solid #ddd;padding:8px;">
TBD
</th>
</tr>
<tr>
<th style="border:1px solid #ddd;padding:8px;">
Youth
</th>
<th style="border:1px solid #ddd;padding:8px;">
TBD
</th>
</tr>
<tr>
<th style="border:1px solid #ddd;padding:8px;">
Women's
</th>
<th style="border:1px solid #ddd;padding:8px;">
TBD
</th>
</tr>
</tbody>
</table>
</figure>

Here is what I get:

Table 2 is formatted well, Table 1 is not; however, it does selectively exclude rows appropriately.

With Row inclusion:

With row exclusion:

Re: Popup table width formatting with conditional row display

RaenaDeMaris — Wed, 15 Jun 2022 15:15:49 GMT

To get tables of the full width in the popup, add "width="100%" within in your <figure class> tag. You'll also probably need to add it within the table style tag, or in your case maybe the <th style> tag. Screen capture of code that works, along with the result is below.

sample HTML code specifying width="100%"resulting tables in popup with uniform widths filling the width of the popup

Re: Popup table width formatting with conditional row display

RaenaDeMaris — Wed, 15 Jun 2022 15:21:25 GMT

As for excluding rows with no or null data, you'll write an Arcade expression for excluding that, like this:

## LinkToCleanupEmpty ## {expression/expr10}
Iif(IsEmpty(Trim($feature.URLCleanup)), "none", "table-row")

The Trim part of the arcade expression trims blank spaces from the field, if any. Specifying "table-row" at the end rather than the $feature or "inline" seems to work best in new Map Viewer.

Then the HTML for that particular table row would look similar to this:

<tr style="background-color:#FFFFFF;display:{expression/expr10};" valign="top">
<td style="border:1px solid rgb(203, 203, 203);padding:2px;">
<span style="font-family:Arial;font-size:10px;">Link to Cleanup Plan</span>
</td>
<td style="border:1px solid rgb(203, 203, 203);padding:2px;">
<a href="{URLCleanup}" rel="nofollow ugc"><span style="font-family:Arial;font-size:10px;"><strong>Click Me</strong></span></a>
</td>
</tr>

Re: Popup table width formatting with conditional row display

jayt70 — Wed, 15 Jun 2022 18:09:30 GMT

Thank you this fixed it! I was using inline previously and table-row made the difference!

Re: Popup table width formatting with conditional row display

RaenaDeMaris — Wed, 15 Jun 2022 18:15:32 GMT

@jayt70 my bad for not including the actual HTML code that I'm using. The "width=100%" is used twice--first in the <figure> tag and next in the table style tag. Sorry about that. The actual HTML used in the popup displayed is below:

<p>
<span style="font-family:Arial;font-size:12px;"><strong>Status Information</strong></span>
</p>
<figure>
<figure>
<figure>
<figure class="table" style="width:100%;">
<table style="background-color:#F7F7F7;border:1px solid black;" width="100%">
<tbody>
<tr style="background-color:#FFFFFF;" valign="top">
<td style="border:1px solid rgb(203, 203, 203);padding:2px;">
<span style="font-family:Arial;font-size:10px;">Closure Status</span>
</td>
<td style="border:1px solid rgb(203, 203, 203);padding:2px;">
<span style="font-family:Arial;font-size:10px;">{ClosureSta}</span>
</td>
</tr>