Conditional styling for text inside combo box

Conditional styling for text inside combo box

  

I want to color each element in the combo box based on the status.

If i do it in the Style Classes property of the combo box, all elements take the color of the first element.

How to do it?

Use the extended properties.

You can use Style or Class, and define the style using a conditional, like this:

if (condition, "class1", "class2") 

or

if (condition, "color:red", "color:blue")

The extended properties are attributes applied to the element, and use the same HTML syntax.

Cheers,
Eduardo Jauch

EDIT:

Example: 

Eduardo Jauch wrote:

Use the extended properties.

You can use Style or Class, and define the style using a conditional, like this:

if (condition, "class1", "class2") 

or

if (condition, "color:red", "color:blue")

The extended properties are attributes applied to the element, and use the same HTML syntax.

Cheers,
Eduardo Jauch

EDIT:

Example: 

This way all the elements in the combo box (all rows) get the same color as the first row.


I need a combo box which has rows with different colors based on a condition (status).


Sorry,

Misunderstood your need.

There is no way to do this directly, as you don't have access to the style of each element in design time.
Maybe there is something in the Forge that can help you, like a component, but I don't know if it exist.

Probably, you'll have to use JavaScript to inject the "class" or "style" attribute based on your condition. 

Also, maybe you could consider make the options available to the user in a different way, like a Record List, where you can do this. 

Cheers,
Eduardo Jauch

Hi Mariam,

we can do this just by nth child selector for the option using CSS only.

like below


PFA O.M.L


Pankaj Pant wrote:

Hi Mariam,

we can do this just by nth child selector for the option using CSS only.

like below


PFA O.M.L


To color based on a condition it is still necessary to use JavaScript
Unless all the items are known at design time and can be ordered so that you can use this approach.

Cheers,
Eduardo Jauch


Eduardo Jauch wrote:

Pankaj Pant wrote:

Hi Mariam,

we can do this just by nth child selector for the option using CSS only.

like below


PFA O.M.L


To color based on a condition, it is still necessary to use JavaScript
Unless all the items are known at design time and can be ordered so that you can use this approach.

Cheers,
Eduardo Jauch


Yes, I agree with you but in the question, this thing is not mentioned that's why I give this solution. with the help of jquery find function, we can find the status and add class to that option.


Thanks

Pankaj Pant

Hello Pankaj,

While I think you guessed right, this is in the third comment:

"I need a combo box which has rows with different colors based on a condition (status)."

So, this is why I said that if the "condition" is known in design time, and can be ordered (usually it can), you can use this approach. If the condition is not known, that was what I understood from the affirmation (probably wrongly), you need to use JavaScript.

So, in the end, we agree with both methods, we only can't be absolute sure of what she needs (only guess). Your guess probably being better than mine ;)

Cheers,
Eduardo Jauch