Useful CSS Stuff

Ignition
47

Styling Tree Component Items

I forgot to add this here a while ago.. Here’s some useful stuff for styling the Tree component.


/***********************/
/* Tree View Component */

/* Select tree items that contain specific text E.g. "UPDATE"*/
.tree-item[data-label*="UPDATE"] {
  background-color: aliceblue;
}

/* Select tree items that contain text "UPDATE" and any of its child nodes */
.parent-node:has(> .tree-row .tree-item[data-label*="UPDATE"]), .tree-item[data-label*="UPDATE"] {
  background-color: aliceblue;
}

/* Select the child nodes of tree items that contain text "UPDATE" */
   Does not select the item that contains "UPDATE" itself. */
.parent-node:has(> .tree-row .tree-item[data-label*="UPDATE"]) {
  background-color: aliceblue;
}

/* Select items that use a specific icon */
.tree-row:has(svg[data-icon="material/functions"]) {
  background-color:lightslategray;
  color:#fff;
  font-weight: bold;
}

/* Change the "hover" style of items */
.ia_treeComponent__node:hover:not(.ia_treeComponent__node--selected) {
  background-color: #ffda3344 !important;
}

Example (bold and aliceblue background for rows that contain the “material/functions” svg icon):

image
image890×617 38.7 KB

To apply these styles below to only Tree components with a specific Perspective Style class assigned, add the psc path to the start, separated by a space. e.g. this part .psc-Components\/EndNodeOpacity below:

/* Applies this style to Tree components with the "Components/EndNodeOpacity" Perspective Style applied */
.psc-Components\/EndNodeOpacity .tree-item[data-label*="UPDATE"] {
    background-color: aliceblue;
}
3 Likes