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>
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>
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.
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.
Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.
