Cannot color Yes/No Button Group like I want

[Jaymer]

I had 4 Yes/No questions using Radio Buttons.
In v9, I can easily change them to Button Group.
I like this new style...

Screenshot 2024-04-06 at 4.08.27 PM.png (22.21 KiB) Viewed 2610 times

Would be nice to look like this (simple CSS tweak), Except, the NO should be Red, not green.

Screenshot 2024-04-01 at 11.17.41 AM.png (23.1 KiB) Viewed 2610 times

I cannot find a way using only CSS (ie. no JS Render Script) to style the YES green, and NO red.

I understand its tough, because its not just a Yes/No switch - it can be any number of options in the group.

Bruce mentioned trying a Presentation rule, but all that does is color the entire object:

Screenshot 2024-04-06 at 4.07.38 PM.png (7.88 KiB) Viewed 2610 times

So close but yet so far.

[hpl123]

I am fairly sure this is possible using only CSS but it will not be an easy or clean fix. The thing is, you have to find a way to uniquely select each button or groups of buttons and I would recommend you dig into the CSS documentation on selectors. Your best bet is using the label i.e use the unique label name in the selector (or cell id/class if you can set that in some way. I am not in front of a computer and can't remember the AwareIM settings etc.) and then also use in your selector something like select next div (or whatever HTML element the button is) after the label (or a trick is writing the label name as a span with an id e g <span id='btn1'>Label</span> and then use the id in the next div selector). The next div thing is just one thing/selector you can use, you have a bunch more you can use.

Another non clean and messy solution is using separators i.e 1 separator per button and then have a class or id in the seperator changing the style of the button.

PS: There is most likely a better and "proper" way to do this directly via KendoUI and scripts so is what I would look at first because the CSS route is a huge and complex rabbit hole . Another thing is, in UI like this e.g 2 buttons with different colors or states, you most often have 2 different classes you can manipulate to change things related to 1 button so it wouldn't surprise me if that also is the case in KendoUI but it is maybe tricky to find the classes or find how the style to each button is applied.

[Jaymer]

I am fairly sure this is possible using only CSS but it will not be an easy or clean fix. The thing is, you have to find a way to uniquely select each button or groups of buttons and I would recommend you dig into the CSS documentation on selectors. Your best bet is using the label i.e use the unique label name in the selector (or cell id/class if you can set that in some way. I am not in front of a computer and can't remember the AwareIM settings etc.) and then also use in your selector something like select next div (or whatever HTML element the button is) after the label (or a trick is writing the label name as a span with an id e g <span id='btn1'>Label</span> and then use the id in the next div selector). The next div thing is just one thing/selector you can use, you have a bunch more you can use. .

I’m surprised you think that I wouldn’t have already checked all that out.

[hpl123]

I am fairly sure this is possible using only CSS but it will not be an easy or clean fix. The thing is, you have to find a way to uniquely select each button or groups of buttons and I would recommend you dig into the CSS documentation on selectors. Your best bet is using the label i.e use the unique label name in the selector (or cell id/class if you can set that in some way. I am not in front of a computer and can't remember the AwareIM settings etc.) and then also use in your selector something like select next div (or whatever HTML element the button is) after the label (or a trick is writing the label name as a span with an id e g <span id='btn1'>Label</span> and then use the id in the next div selector). The next div thing is just one thing/selector you can use, you have a bunch more you can use. .

I’m surprised you think that I wouldn’t have already checked all that out.

Most things can be done with CSS and I have done similar things in the past so I still think this is possible. Send me a login via PM and I can take a stab at it . I only need the web view and could be to a temporary VP i.e I don't need server access.