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:
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 
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,
(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