1
0
-1

Hi,

I have a radio button group with the options; Yes, No, N/A and I would like to colour the choice if selected but leave grey if not.  For example if Yes is selected it should be coloured green with white text, otherwise remain coloured as is (grey with black text).  In the case of No, if selected it should be red with white text or if not selected be grey with black text.

In other words appear like this

Hoping you can help.


Thank you

Adele



    CommentAdd your comment...

    1 answer

    1.  
      1
      0
      -1

      Hi Adele,

      You can do that with a combination of dynamic classes and shared styles.  I used the default One, Two, Three values from a radio button group to produce this sample.

      Create a Dynamic Class rule with something like this:

        switch (data.radioButtonGroup) {
          case 'One': return 'class_one';
          case 'Two':return 'class_two';
        }

      Then create a new shared style, and edit the custom CSS to add something like this:

      form[name='form'] {

      .multicolor-22982 {

          &.class_one .wdg-selected {
            color: white;
            background-color: green;
          }
          &.class_two .wdg-selected {
            color: white;
           background-color: red;
          }

      I called my shared style 'multicolor', and Maestro generated multicolor-22982 as the class name.  Yours will be different, but just add the &.class_one and &.class_two Less selectors in the equivalent place as I have.

      There are other ways to achieve this, but this one will achieve what you want.

      You should also think whether or not you want to apply your style changes in a template, rather than directly in the form, and whether to create a shared component for re-use.

      1. Adele

        Thank you Bill.  This works on the Maquire template but sadly not on ours.  I will have to consult with Avoka on this, but appreciate your help.

      CommentAdd your comment...