I am new to LF Forms.
How do I setup 3 radio buttons to be on the same line as the question in LF Form?
Thank you,
Teng
Hi,
I got it working with the code below:
#q12 .cf-field, #q12 .cf-label {width: 50% !important;}
#q12 .choice {width: 30%;}
Result screen:
I saw the code below in https://answers.laserfiche.com/questions/146082/Can-we-evenly-space-radio-buttons-on-forms
#q20 .cf-field, #q20 .cf-label {width: 100% !important;}
#q20 .choice {width: 20%;}
and I adjusted the code to be
#q12 .cf-field, #q12 .cf-label {width: 50% !important;}
#q12 .choice {width: 30%;}
and it gave me the result I am looking for.
Regards,
Teng
Hello Teng,
In the properties of the radio button, you can set the layout to be side by side, 1 columns, 2 columns, 3 columns....
this link hold details for creating and editing forms page.
Regards,
Maher.
Hi,
I would like the radio buttons to be next to the label. Can that be done in CSS?
Thanks,
Teng
Yes, you can use the display: inline in css
#q1 label {display: inline;}
where #q1 is your field number.
It does not do what I need.
Do you have the layout set side by side and the display: inline?
Or how about your settings with label align left?
I tried that and it did not help. It affected the alignments of my other fields on the form, so I changed the Labels Alignment back to Top.
A few weeks ago, I saw in Laserfiche Answers on how to make 2 radio buttons to be on same line as the label. I don't know how to make 3 radio buttons to be on the same line as the label. Below is the code that I found and I adjusted it, and I don't know how to make 3 radio buttons on the same line as the label:
#q12 label {width:520px;}
#q12 .cf-small {width:100px !important;}
#q12 .cf-field {width:100px !important;}
#q12 span.choice {width: 38% !important;}
#q12 .choice .form-option-label {max-width : 1%;}
Try the span choice to be 30% or less. I think it is running over because 38 times 3 is more than 100% the span cannot be more than 100%.
I am getting closer with this code:
#q12 label {width:520px;}
#q12 .cf-small {width:30% !important;}
#q12 .cf-field {width:30% !important;}
#q12 span.choice {width: 30% !important;}
#q12 .choice .form-option-label {max-width : 30%;}
I am playing to see how to get the 'I don't know' to be on one line.
Hello Teng,
What do you mean next to the label? If you are using side by side option or 3 columns, without using any CSS, the radio buttons will be on the same line as the questions.
But if you have a long label, the label will take maybe 2 lines but the radio buttons will stay next to it.
If you mean that you need to minimize the distance between the label and the radio buttons, use the options side by side in the properties, and the adjust the following CSS according to your sizes.
.ClassOfRadioButton .cf-label{width:60% !important;}
.ClassOfRadioButton .cf-field{width:40% !important;}
Regards,
Maher.
Hi:
This is what I currently have:
This is what I would like it to be, the question Is the Respondent a student? (Please choose one): and radio buttons on the same line. I don't know how to make the 'I don't know' to be on one line.
Regards,
Teng