-
CVNoseworksAsked on July 27, 2017 at 12:47 PM
question is, is there anyway i can have the radio buttons across instead of vertical? Example the above screen shot. I'd like to have the 3 Started buttons across, the 3 Advanced across, and the 3 Excellent, this way the form isn't so long
-
Nik_CReplied on July 27, 2017 at 1:21 PM
I will work on this issue for you and I will get back once I have a working solution. Since it needs to be adjusted with CSS because of the theme used.
Thank you for your patience.
-
CVNoseworksReplied on July 27, 2017 at 2:20 PM
OK, thanks, I can change the theme I was just playing with colours. Haven't really wrapped my head around everything yet. Need time to watch the videos.
If you can recommend a theme that allows me more freedom in designing the form itself that would be great
-
Nik_CReplied on July 27, 2017 at 2:42 PM
If that's the case, then when the theme is removed, you can set that checkbox fields are spread in three columns:
And shrink the field:
And I set the label to be on top so it will align better:
I added some CSS as well, but please check my clone of your form and let us know if that is what you had in mind: https://form.jotformpro.com/72075564385968
Thank you!
-
CVNoseworksReplied on July 27, 2017 at 3:03 PM
This is great, did your CSS help with the formatting? right now the buttons need to be spread apart a bit as they are overlapping. I haven't figured out how do the spacing in the radio buttons, not sure what the padding is, and what input width affects. If you can point me to where I can find this info that would be great
-
Nik_CReplied on July 27, 2017 at 3:12 PM
Yes, I fixed the overlapping with CSS, this is the CSS I used:
input#input_9_1 {
margin-left: 23px;
}
input#input_9_2 {
margin-left: 23px;
}
input#input_9_4 {
margin-left: 23px;
}
input#input_9_5 {
margin-left: 23px;
}
input#input_9_7 {
margin-left: 23px;
}
input#input_9_8 {
margin-left: 23px;
}
#input_40_1{
margin-left: 23px;
}
#input_40_2{
margin-left: 23px;
}
#input_40_5{
margin-left: 23px;
}
#input_40_4{
margin-left: 23px;
}
#input_40_7{
margin-left: 23px;
}
#input_40_8{
margin-left: 23px;
}
#input_60_1{
margin-left: 47px;
}
#input_60_3{
margin-left: 47px;
}
#input_60_5{
margin-left: 47px;
}
But it will work on my form only since the IDs are different. Here is how you can find ID in your form: https://www.jotform.com/help/146-How-to-Find-Field-IDs-and-Names
So you can use the above CSS you will just have to change the ID part (i.e. #input_60_5)
If you need any assistance please get back to us.
Thank you!