Can we give different colors to the options of Perspective Dropdown Component

General Discussion
1

Hello,

I have requirement that I have to change the color of the options from the dropdown, which the operator attended earlier. Is there any way to do that?
Ignition Version : 8.1.0

Thanks.

1 Like
2

Are you using Vision or Perspective

3

Do you mean this?
image

If you mean different colors for the individual options then i don’t think so. Possibly with CSS but I am a total novice when it comes to CSS, maybe one of those CSS wizards like @victordcq can tell us.

4

I am using Perspective.

5

Thanks for the reply.

dropdownOptionStyle (the image you shared) its applying color to all the options in the dropdown.
We want to color only specific options, which are attended earlier. We have data of previously attended options.

6

Unfortunatly the css selector :visited doesnt seem work because the dropdown gets removed by igntion when it closes. or there are no links attachted to the options

Now you could i suppose put a binding on dropdownOptionStyle.classes
and create a bunch of classes like so DropDownHighlight1 with then a theme.css to use the nthcheild selector

However… you will have to make a bunch of styles for every possible selection and make the binding selected the right classes…

Not to bad for a few option, but still a bunch of copypaste work if you have many options. So good luck with that xd Atleast it will work for every dropdown if you select the style So it would only be a lot of work once (apart from the logic to select the correct styleclass)

.psc-DropDownHighlight1:nth-child(1){
background-color:red;
}
.psc-DropDownHighlight2:nth-child(2){
background-color:red;
}
.psc-DropDownHighlight3:nth-child(3){
background-color:red;
}

you can either let your binding select both classes or create a class that selects both xd
I suppose it might be more logical in the binding, also less work than created classes for every combination

.

psc-DropDownHighlight1and3:nth-child(1), .psc-DropDownHighlight1and3:nth-child(3){
background-color:red;
}

Also note that you dont need to create the styleclasses in the designer,
aslong as the names match the css selector
in this case styleclass DropDownHighlight1 (and 2) does not have to exist in the designer
the expression on the style.classes would have to return a string where every class is seperated by a space
image

3 Likes
7

Thanks @victordcq , I really appreciate your help.

For time being I provided temporary solution as checkbox emoji (:heavy_check_mark:) for attended options.
In coming time I will definitely work on the solution you provided.

Thanks.

8

I am trying to do this as well. Make some options green, some yellow, and some white. Even when I set a binding to backgroundColor, it does not change for each option.
image

9

If you want different a color for each option element, then you can remove the background color, create an empty style class (i.e. "MyDropDown") and add it to the dropdownOptionsStyle.

Then make the changes to your custom stylesheet like @victordcq suggested:

.psc-MyDropDown:nth-child(1){
background-color:red;
}
.psc-MyDropDown:nth-child(2){
background-color:green;
}
.psc-MyDropDown:nth-child(3){
background-color:blue;
}

image

1 Like
10

if you need specifiek colors for specifiek values, you could also use javascript to inject the correct styles based on some content.

1 Like