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)
1 Like
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
Piggy backing off another solution I found:
I expect something in a style sheet is messing up my page.
So I tried the to do the small footprint technique,
It doesn't work though. Not sure why.
Issue:
Tried to figure it out at the browser.
I just don't know how to override it.
What are you expecting to see?
you got to close and reopen the view sometimes for ccs to take effect
1 Like
The color of the pills and background never changed for me.
I am on 8.1.30.
Tried this in the background image area, didn't work.
I require help with the style sheet technique.
I can't seem to find anything on the Ignition style sheet in the manual.
Might be me or the new manual.
you can not nest selectors
you wrapper the dropdown styles in .psc-smartsheets, that is not possible
I don't know what that means.
Where do I learn how to do this?
Where is this in the manual?
Or can you show me?
remove .psc-smartsheets-dropdowns{
and the last }
This is how css works, has nothing to do with ignition
1 Like
I need to specify a style.
I don't want to set this for all the other pages other people have made.
then you gotta do it like this
without the label if you dont need it
ofc
I don't know what the text will be.
I have a query binding for the values and labels.
I want them all to be one color, an don't know what the text will be.