i am using arcgis gis 4.15.i want to set colors for alternative rows of popup datatable.How can i acheive this i tried it.but not successfull.
Thanks.
Nadir,
Here are the css rules that will work:
Your issue was ":nthChild" and not ":nth-child"
<SPAN class="punctuation token">.</SPAN>esri<SPAN class="operator token">-</SPAN>widget__table tr<SPAN class="punctuation token">:</SPAN>nth<SPAN class="operator token">-</SPAN><SPAN class="token function">child</SPAN><SPAN class="punctuation token">(</SPAN>odd<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> background<SPAN class="operator token">-</SPAN>color<SPAN class="punctuation token">:</SPAN> <SPAN class="token function">rgba</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">0.1</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="punctuation token">.</SPAN>esri<SPAN class="operator token">-</SPAN>widget__table tr<SPAN class="punctuation token">:</SPAN>nth<SPAN class="operator token">-</SPAN><SPAN class="token function">child</SPAN><SPAN class="punctuation token">(</SPAN>even<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> background<SPAN class="operator token">-</SPAN>color<SPAN class="punctuation token">:</SPAN> <SPAN class="token function">rgba</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">0.02</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>
Hello @RobertScheitlin__GISP . It seems that the above suggestion does not work for feature table rows. Tried:
.esri-feature-table tr:nth-child(odd) { background-color: rgba(255,0,0,0.1); } .esri-feature-table tr:nth-child(even) { background-color: rgba(0,255,0,0.02); }
Suggestions? Thanks.
Dear Robert ,
thanks for you reply.But i want to place custom color for
esri-widget__table which is inside widget popup.
i make css class
.esri-widget__table tr:nthChild(odd){
background-color:red;
}
.esri-widget__table tr:nthChild(even){
background-color:green;
but it did not make any impact on my popup.
so please help.
thanks again.
Using this sample
ArcGIS API for JavaScript Sandbox
and adding a few other fields to the table BY DEFAULT the rows alternate color.
In the code below I only added lines 46-55 (two more fields, to show the alternating color)
<SPAN class="keyword token">var</SPAN> featureLayer <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">FeatureLayer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN> url<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"https://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/Beverly%20Hills%20Trees%20By%20Block/FeatureServer/0"</SPAN><SPAN class="punctuation token">,</SPAN> popupTemplate<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="comment token">// autocasts as new PopupTemplate()</SPAN> title<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Beverly Hills trees by block"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="comment token">// Set content elements in the order to display.</SPAN> <SPAN class="comment token">// The first element displayed here is the fieldInfos.</SPAN> content<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="comment token">// It is also possible to set the fieldInfos outside of the content</SPAN> <SPAN class="comment token">// directly in the popupTemplate. If no fieldInfos is specifically set</SPAN> <SPAN class="comment token">// in the content, it defaults to whatever may be set within the popupTemplate.</SPAN> type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"fields"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="comment token">// FieldsContentElement</SPAN> fieldInfos<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN> <SPAN class="punctuation token">{</SPAN> fieldName<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Point_Count"</SPAN><SPAN class="punctuation token">,</SPAN> visible<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">false</SPAN><SPAN class="punctuation token">,</SPAN> label<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Count of Points"</SPAN><SPAN class="punctuation token">,</SPAN> format<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN> places<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> digitSeparator<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN> fieldName<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"relationships/0/Point_Count_COMMON"</SPAN><SPAN class="punctuation token">,</SPAN> visible<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">,</SPAN> label<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Sum of species tree count"</SPAN><SPAN class="punctuation token">,</SPAN> format<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN> places<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> digitSeparator<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> statisticType<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"sum"</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN> fieldName<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"relationships/0/COMMON"</SPAN><SPAN class="punctuation token">,</SPAN> visible<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">false</SPAN><SPAN class="punctuation token">,</SPAN> label<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Common Name"</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN> fieldName<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"BLOCKCE10"</SPAN><SPAN class="punctuation token">,</SPAN> visible<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">,</SPAN> label<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Block"</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN> fieldName<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"STATEFP10"</SPAN><SPAN class="punctuation token">,</SPAN> visible<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">,</SPAN> label<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"State"</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN> fieldName<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"COUNTYFP10"</SPAN><SPAN class="punctuation token">,</SPAN> visible<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">,</SPAN> label<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"County"</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="punctuation token">]</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="comment token">// You can also set a descriptive text element. This element</SPAN> <SPAN class="comment token">// uses an attribute from the featurelayer which displays a</SPAN> <SPAN class="comment token">// sentence giving the total amount of trees value within a</SPAN> <SPAN class="comment token">// specified census block. Text elements can only be set within the content.</SPAN> type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"text"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="comment token">// TextContentElement</SPAN> text<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"There are {Point_Count} trees within census block {BLOCKCE10}"</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="comment token">// You can set a media element within the popup as well. This</SPAN> <SPAN class="comment token">// can be either an image or a chart. You specify this within</SPAN> <SPAN class="comment token">// the mediaInfos. The following creates a pie chart in addition</SPAN> <SPAN class="comment token">// to two separate images. The chart is also set up to work with</SPAN> <SPAN class="comment token">// related tables. Similar to text elements, media can only be set within the content.</SPAN> type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"media"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="comment token">// MediaContentElement</SPAN> mediaInfos<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN> <SPAN class="punctuation token">{</SPAN> title<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"<b>Count by type</b>"</SPAN><SPAN class="punctuation token">,</SPAN> type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"pie-chart"</SPAN><SPAN class="punctuation token">,</SPAN> caption<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">""</SPAN><SPAN class="punctuation token">,</SPAN> value<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN> fields<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="string token">"relationships/0/Point_Count_COMMON"</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> normalizeField<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">null</SPAN><SPAN class="punctuation token">,</SPAN> tooltipField<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"relationships/0/COMMON"</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN> title<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"<b>Mexican Fan Palm</b>"</SPAN><SPAN class="punctuation token">,</SPAN> type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"image"</SPAN><SPAN class="punctuation token">,</SPAN> caption<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"tree species"</SPAN><SPAN class="punctuation token">,</SPAN> value<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN> sourceURL<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"https://www.sunset.com/wp-content/uploads/96006df453533f4c982212b8cc7882f5-800x0-c-default.jpg"</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN> title<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"<b>Indian Laurel Fig</b>"</SPAN><SPAN class="punctuation token">,</SPAN> caption<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"tree species"</SPAN><SPAN class="punctuation token">,</SPAN> value<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN> sourceURL<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"https://selectree.calpoly.edu/images/0600/09/original/ficus-microcarpa-tree-3.jpg"</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="punctuation token">]</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="comment token">// You can set a attachment element(s) within the popup as well.</SPAN> <SPAN class="comment token">// Similar to text and media elements, attachments can only be set</SPAN> <SPAN class="comment token">// within the content. Any attachmentInfos associated with the feature</SPAN> <SPAN class="comment token">// will be listed in the popup.</SPAN> type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"attachments"</SPAN> <SPAN class="comment token">// AttachmentsContentElement</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="punctuation token">]</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN> outFields<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="string token">"*"</SPAN><SPAN class="punctuation token">]</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>
Signed in members can post, follow updates, and more. New here? Register a free account.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.
