I have a table that has a radio button in each row. It's for evaluations. Column is named 4=Exceeds expectation 3= Meets expectations, etc. Does anyone know the script so only one column can be selected for each row? Right now 4 =Exceeds expectations and 3=Meets expectations can be selected at the same time. Please see the attached picture. I want only one radio button per row selected.
Question
Question
Answer
Hi Jonathan,
You can instead create a single radio button column and include all five options, and then do the following to have more than 4 columns (which is the max in the UI).
For the five columns of radio buttons, here are my radio button field's settings:
Add the class "radio-button-columns" (or another name, but change the CSS too) to that field and then add the following CSS:
.radio-button-columns span.choice { width: 20%; }
Additionally, for the text above the field, by default this will show above every line, which is likely not what you want. You can consult my post here and/or use this CSS:
/* hides all but the first row's helptext above field */ .radio-button-columns tr:first-child label.cf-helptext.ab-help { display: inherit; } .radio-button-columns tr label.cf-helptext.ab-help { display: none; } /* makes the label align with the cell below the helptext */ .col0 { vertical-align: bottom; }
If you then want to add more columns you can simply change the "width" value in the first CSS to 100 divided by the number of columns (rounded down), ie 6 columns is 16.6%, 7 is 14.2%, 8 is 12.5%, etc.