Zone Lookup Results Table Style

Question

I'm using the Zone Lookup Tool template.  In the web map, I've configured a custom attribute display for the pop-up to hide fields that have blank values.  This blows out the default results display in the zone lookup tool and replaces the display with the custom attribute display from the pop-up.  In an attempt to maintain the same zebra-stripes table, I embedded a custom HTML table into the pop-up.  The pop-up will display the table, however the table is without the zebra-stripes or alternating color on the rows.  I've attached a screen shot of the zone lookup tool default results display table that I'm attempting to recreate in the pop-up.  I suspect that Instant Apps has some limitations on rendering custom HTML?  Any direction on how to solve this is greatly appreciated!

zebrastripstable.png

DiegoGuidi1_0-1620045546345.png

John_Herrera · Answer

Thank you for your time!  It's greatly appreciated!

khutchins · Answer

@John_Herrera It looks like the default colors are hard to differentiate when using the light theme. For dark themes the alternating row background colors are more obvious.

You can use the Custom CSS option in the configuration experience to modify the background color of the alternating rows to make it show up better.

Here's an example of custom css that makes the alternating row background color a mid gray color.

.esri-widget__table tr:nth-child(odd) {
background-color: #ddd;
}