Solved

Create style class for single choice control


Badge +5

I need to create a css class to control the text of the selected option in a radio button - single choice control.  I cannot find any examples of how to achieve this.  I think if I have the proper class I could use Rules to control the text of the selected Option, like in the secreenshot below.

 

 

icon

Best answer by Wei-Jye Wang 13 January 2023, 03:25

View original

12 replies

Userlevel 6
Badge +16

Hi @artmov 

These articles may be helpful to you

https://help.nintex.com/en-US/nwc/Content/Designer/CustomCSSGuidelines.htm

 

Badge +5

Thank you @Garrett 

I saw this article before, but it is not extensive.  They are just showing some samples.  There is no documentation with complete list of Nintex CSS classes.  My specific scenario is not described in that article.

Regards. Art.

Badge

Tell me exactly what you are trying to do?

Badge

Go to the settings area of the workflow and add this to the Custom CSS dropdown:

input[type=radio]:checked + label{
color:#000000; font-weight:bold;
}

 

This will make the checked radio button black and bold.  Hope this helps.

Badge +5

Hi @Garrett 

I attached the screenshot of what I am trying to achieve with my question.  Basically it is a radio Button with two selections. When you select one, the text for that selection becomes Bold, and the de-selected options text is regular.  So it is going to toggle between Bold and Regular font based on whish option is selected.  It seems that I can control the label of the radio button(in my example Radio Label), but not the text for the options.

Regards, Art.

Userlevel 2
Badge +3

Hi Art, wondering if you have tried to define your own CSS Class in the config panel of the control under Styling. This custom class can then be utilised in the rules engined to toggle the bold and regular. Let me know if this helps. 

Badge +5

Hi @SeeDee 

I tried that, but I cannot figure out the syntax for the accessing the Radio Button Selected text.

I can do it for the radio’s label though.

Tnx.,

Badge +1

Greetings @artmov , is the below is what something you are trying to achieve?

Here’s the CSS that I used:

/* Selected label text */
[dir] .nx-theme-styles .nx-theme-radio-1 .nx-radio input[type="radio"]:checked + .nx-radio-container .nx-radio-label {
color: #000;
font-weight: bold;
}
/* Selected radio button */
[dir] .nx-theme-styles .nx-theme-radio-1 .nx-radio input[type="radio"]:checked + .nx-radio-container .nx-radio-faux {
border-color: #cbcbcb;
}

/* Radio button(s) that are not selected */
[dir] .nx-theme-styles .nx-theme-radio-1 .nx-radio input[type="radio"]:not(:disabled) + .nx-radio-container .nx-radio-faux {
background-color: #e6e6e6;
}
/* label text for the radio button(s) that are not selected */
[dir] .nx-theme-styles .nx-theme-radio-1 .nx-radio .nx-radio-container .nx-radio-label {
color: #7f7f7f;
}

The part for accessing the radio button selected text is from the first block:

[dir] .nx-theme-styles .nx-theme-radio-1 .nx-radio input[type="radio"]:checked + .nx-radio-container .nx-radio-label {
color: #000;
font-weight: bold;
}

There is no need to use custom CSS class in the config panel to achieve this. Let me know if this solve your problem. Thank you.

Badge +5

Hi @Wei-Jye Wang 

This is working.  Thank you so much.  How can I apply this style to only one single choice control on my form and not to all of them?

Best Regards.

Art.

Badge +1

Hi @Wei-Jye Wang 

This is working.  Thank you so much.  How can I apply this style to only one single choice control on my form and not to all of them?

Best Regards.

Art.

@artmov There are few ways to achieve that. The easiest way is to use custom CSS class in the config panel that we introduced recently.

Say you added `my-custom-choice-single` in CSS class for the single choice control, you can now inspect element in preview tab and notice that the CSS class that you just entered will not be injected to the control group/container like this:

So based on the hierarchy above, we can now use the CSS class that we added just now, in the CSS code like this:

/* Selected label text */
[dir] .nx-theme-styles .my-custom-choice-single .nx-theme-radio-1 .nx-radio input[type="radio"]:checked + .nx-radio-container .nx-radio-label {
color: #000;
font-weight: bold;
}
/* Selected radio button */
[dir] .nx-theme-styles .my-custom-choice-single .nx-theme-radio-1 .nx-radio input[type="radio"]:checked + .nx-radio-container .nx-radio-faux {
border-color: #cbcbcb;
}

/* Radio button(s) that are not selected */
[dir] .nx-theme-styles .nx-theme-radio-1 .nx-radio input[type="radio"]:not(:disabled) + .nx-radio-container .nx-radio-faux {
background-color: #e6e6e6;
}
/* label text for the radio button(s) that are not selected */
[dir] .nx-theme-styles .nx-theme-radio-1 .nx-radio .nx-radio-container .nx-radio-label {
color: #7f7f7f;
}

The above CSS code will only get applied to the single control that has `my-custom-choice-single` CSS class. And here’s the result:
 

Notice that the second and third choice control did not get the stylings from our CSS code, only the first choice control has it.

 

Let me know if this works for you. Thank you.

Badge

Sounds exactly like what I said lol. Good luck.

Badge +5

Hi @Wei-Jye Wang ,

This is working perfectly.

Thank you.

Reply