Alternative rows color for popup

NadirHussain — Tue, 23 Jun 2020 11:32:55 GMT

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.

Re: Alternative rows color for popup

RobertScheitlin__GISP — Sat, 11 Dec 2021 22:39:36 GMT

Nadir,

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)

        var featureLayer = new FeatureLayer({
          url:
            "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/Beverly%20Hills%20Trees%20By%20Block/FeatureServer/0",
          popupTemplate: {
            // autocasts as new PopupTemplate()
            title: "Beverly Hills trees by block",

            // Set content elements in the order to display.
            // The first element displayed here is the fieldInfos.
            content: [
              {
                // It is also possible to set the fieldInfos outside of the content
                // directly in the popupTemplate. If no fieldInfos is specifically set
                // in the content, it defaults to whatever may be set within the popupTemplate.
                type: "fields", // FieldsContentElement
                fieldInfos: [
                  {
                    fieldName: "Point_Count",
                    visible: false,
                    label: "Count of Points",
                    format: {
                      places: 0,
                      digitSeparator: true
                    }
                  },
                  {
                    fieldName: "relationships/0/Point_Count_COMMON",
                    visible: true,
                    label: "Sum of species tree count",
                    format: {
                      places: 0,
                      digitSeparator: true
                    },
                    statisticType: "sum"
                  },
                  {
                    fieldName: "relationships/0/COMMON",
                    visible: false,
                    label: "Common Name"
                  },
                  {
                    fieldName: "BLOCKCE10",
                    visible: true,
                    label: "Block"
                  },
                  {
                    fieldName: "STATEFP10",
                    visible: true,
                    label: "State"
                  },
                  {
                    fieldName: "COUNTYFP10",
                    visible: true,
                    label: "County"
                  }
                  
                ]
              },
              {
                // You can also set a descriptive text element. This element
                // uses an attribute from the featurelayer which displays a
                // sentence giving the total amount of trees value within a
                // specified census block. Text elements can only be set within the content.
                type: "text", // TextContentElement
                text:
                  "There are {Point_Count} trees within census block {BLOCKCE10}"
              },
              {
                // You can set a media element within the popup as well. This
                // can be either an image or a chart. You specify this within
                // the mediaInfos. The following creates a pie chart in addition
                // to two separate images. The chart is also set up to work with
                // related tables. Similar to text elements, media can only be set within the content.
                type: "media", // MediaContentElement
                mediaInfos: [
                  {
                    title: "<b>Count by type</b>",
                    type: "pie-chart",
                    caption: "",
                    value: {
                      fields: ["relationships/0/Point_Count_COMMON"],
                      normalizeField: null,
                      tooltipField: "relationships/0/COMMON"
                    }
                  },
                  {
                    title: "<b>Mexican Fan Palm</b>",
                    type: "image",
                    caption: "tree species",
                    value: {
                      sourceURL:
                        "https://www.sunset.com/wp-content/uploads/96006df453533f4c982212b8cc7882f5-800x0-c-default.jpg"
                    }
                  },
                  {
                    title: "<b>Indian Laurel Fig</b>",
                    caption: "tree species",
                    value: {
                      sourceURL:
                        "https://selectree.calpoly.edu/images/0600/09/original/ficus-microcarpa-tree-3.jpg"
                    }
                  }
                ]
              },
              {
                // You can set a attachment element(s) within the popup as well.
                // Similar to text and media elements, attachments can only be set
                // within the content. Any attachmentInfos associated with the feature
                // will be listed in the popup.
                type: "attachments" // AttachmentsContentElement
              }
            ]
          },
          outFields: ["*"]
        });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Alternative rows color for popup

NadirHussain — Tue, 23 Jun 2020 19:02:40 GMT

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.

Re: Alternative rows color for popup

RobertScheitlin__GISP — Sat, 11 Dec 2021 22:39:39 GMT

Nadir,

Here are the css rules that will work:

Your issue was ":nthChild" and not ":nth-child"

      .esri-widget__table tr:nth-child(odd) {
        background-color: rgba(255,0,0,0.1);
      }
      .esri-widget__table tr:nth-child(even) {
        background-color: rgba(0,255,0,0.02);
      }‍‍‍‍‍‍

Re: Alternative rows color for popup

LefterisKoumis — Thu, 04 Jan 2024 22:11:02 GMT

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.

topic Re: Alternative rows color for popup in ArcGIS JavaScript Maps SDK Questions

Alternative rows color for popup

Re: Alternative rows color for popup

Re: Alternative rows color for popup

Re: Alternative rows color for popup

Re: Alternative rows color for popup