Hi all,
I created a form with radio buttons.
Unfortunately, I can only put 4 radio buttons on the same line.
How can I create more?
Thanks in advance.
Regards
Are you applying any of the custom CSS to those fields already? If so, remove it.
Then, add "cRadio" to the custom classes under advanced for that field, and put the following in your CSS
.cRadio .choice {
width: 10%;
}
Adjust the width as you see fit. The problem right now is that it looks like some CSS is affecting the width of the input field instead of the container so it is pushing the text up against the radio button.
I think that's for the number of columns. You can put more radio buttons in the "Choices" section.
Thanks you Raul,
this is what I did and it's not what I want.
Regards
Get the Field number for the radios buttons and then put this in the CSS section.
Update the below code to reflect your field ID.
#Field1-0, #Field1-1, #Field1-2, #Field1-3, #Field1-4 {display: inline-block; width: 20%; vertical-align:top;}
Try using side-by-side instead of columns, which won't force the column width, then if necessary you can fine tune the options with some custom CSS.
Ty All
@Raul,
I tried your CSS, but :
1. My text disapear
2. My radio is still on 2 lines
Here my css
/* Button Radio */
#Field18-0, #Field18-1, #Field18-2, #Field18-3, #Field18-4
{
display: inline-block;
width: 20%;
vertical-align:top
}
The problem is that those CSS settings are causing the text to shift. If you look closely, you can see that the numbers are actually hidden behind the radio buttons.
I would start by changing the setting to Side-By-Side instead of columns to see how that looks, then decide on the next step after you get an idea of how it looks.
Jason is correct, it seems that you might have your settings of Mise en page to 4 columns. Change it to Side By Side
Hi all,
Thanks for your help.
@Raul, you right, I changed the Layout to Side by side and it looks pretty good.
Last question,
My radios are too tight.
How can I space them?
Are you applying any of the custom CSS to those fields already? If so, remove it.
Then, add "cRadio" to the custom classes under advanced for that field, and put the following in your CSS
.cRadio .choice {
width: 10%;
}
Adjust the width as you see fit. The problem right now is that it looks like some CSS is affecting the width of the input field instead of the container so it is pushing the text up against the radio button.
Hi Jason,
Thanks ! Look better !