You are viewing limited content. For full access, please sign in.

Question

Question

Only one radio button per table row

asked on April 28, 2020

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.

Screen Shot 2020-04-29 at 1.07.34 AM.png
0 0

Answer

SELECTED ANSWER
replied on April 29, 2020

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.

1 0

Replies

You are not allowed to reply in this post.
You are not allowed to follow up in this post.

Sign in to reply to this post.