Color change on a label

Is there a way on a label, that is being feed from a multi select dropdown, to have each values be a different color?

Eample:

image

Could I make the red be a red color, etc?

Not with the label component itself, but you should be able to do this with the markdown component injecting <span> or similar elements with custom styles.

Or someone like @victordcq will correct me with some magical CSS way to do it :slight_smile:

The simplest way I can see of doing this... is to use a repeater to dynamically repeat labels, and style each instances however you like.
Do you NEED all the strings to be in the same label ?

1 Like

For Markdown syntax see

It's probably not worth the trouble.

Yeah I was asking around. I didnt think it would be a easy enough thing to do,

:man_mage: (might need to put in style for translations too, if you have any)

.psc-magicColors [data-label="red"]{
	background-color:red;
}
.psc-magicColors [data-label="blue"]{
	background-color:blue;
}
.psc-magicColors [data-label="green"]{
	background-color:green;
}
.psc-magicColorsOptions[data-label="yellow"]{
	background-color:yellow;
}

@mjohnson0238 put this in your stylescheet.css

(note the spaceing difference for the options magicColors [data-label and magicColorsOptions[data-labe, so you need to make one per color for both for options and selected)

I think he was asking how to color a label bound to the dropdown, not the little things in the dropdown itself.

1 Like

ah oops, there is a potential solution with css using lineargradients.. but you are better of with a markdown or whatever

I stand by my flex repeater suggestion ;p

view json
{
  "custom": {
    "ds": {
      "$": [
        "ds",
        192,
        1693829765201
      ],
      "$columns": [
        {
          "data": [
            11,
            22,
            33,
            44,
            55,
            66,
            11
          ],
          "name": "id",
          "type": "Integer"
        },
        {
          "data": [
            "A",
            "B",
            "C",
            "A",
            "D",
            "A",
            "B"
          ],
          "name": "loc",
          "type": "String"
        }
      ]
    },
    "foo": 21
  },
  "params": {
    "category_id": "",
    "family_id": "",
    "item_id": ""
  },
  "propConfig": {
    "custom.ds": {
      "binding": {
        "config": {
          "expression": "true"
        },
        "enabled": false,
        "transforms": [
          {
            "code": "\treturn system.dataset.toDataSet(\n\t\t[\u0027id\u0027, \u0027loc\u0027],\n\t\t[\n\t\t\t[11, \u0027A\u0027],\n\t\t\t[22, \u0027B\u0027],\n\t\t\t[33, \u0027C\u0027],\n\t\t\t[44, \u0027A\u0027],\n\t\t\t[55, \u0027D\u0027],\n\t\t\t[66, \u0027A\u0027],\n\t\t\t[11, \u0027B\u0027]\n\t\t]\n\t)",
            "type": "script"
          }
        ],
        "type": "expr"
      },
      "persistent": true
    },
    "custom.foo": {
      "persistent": true
    },
    "custom.isFresh": {
      "access": "PRIVATE"
    },
    "params.category_id": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.family_id": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.item_id": {
      "paramDirection": "input",
      "persistent": true
    }
  },
  "props": {
    "defaultSize": {
      "height": 970,
      "width": 1171
    }
  },
  "root": {
    "children": [
      {
        "meta": {
          "name": "Dropdown"
        },
        "position": {
          "basis": "36px"
        },
        "propConfig": {
          "props.options": {
            "binding": {
              "config": {
                "expression": "true"
              },
              "transforms": [
                {
                  "code": "\tcolors \u003d [\u0027red\u0027, \u0027blue\u0027, \u0027green\u0027, \u0027yellow\u0027]\n\treturn [\n\t\t{\n\t\t\t\u0027label\u0027: c,\n\t\t\t\u0027value\u0027: {\u0027text\u0027: c, \u0027color\u0027:c}\n\t\t} for c in colors\n\t]",
                  "type": "script"
                }
              ],
              "type": "expr"
            }
          }
        },
        "props": {
          "multiSelect": true,
          "value": [
            {
              "color": "blue",
              "text": "blue"
            },
            {
              "color": "red",
              "text": "red"
            },
            {
              "color": "green",
              "text": "green"
            }
          ]
        },
        "type": "ia.input.dropdown"
      },
      {
        "meta": {
          "name": "FlexRepeater"
        },
        "position": {
          "basis": "32px"
        },
        "propConfig": {
          "props.instances": {
            "binding": {
              "config": {
                "path": "../Dropdown.props.value"
              },
              "type": "property"
            }
          }
        },
        "props": {
          "elementPosition": {
            "basis": "auto",
            "grow": 0
          },
          "path": "sandbox/repeated_label",
          "style": {
            "gap": "3px",
            "overflow": "hidden"
          },
          "useDefaultViewHeight": false,
          "useDefaultViewWidth": false
        },
        "type": "ia.display.flex-repeater"
      }
    ],
    "meta": {
      "name": "root"
    },
    "props": {
      "direction": "column",
      "style": {
        "gap": "10px",
        "padding": "15px"
      }
    },
    "type": "ia.container.flex"
  }
}
1 Like

or just display the dropdown, with my styling and disable it so they cant change it