How to properly set and align checkbox buttons?

  • Profile Image
    CVNoseworks
    Asked 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

  • Profile Image
    Nik_C
    Answered on July 27, 2017 at 01: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.

  • Profile Image
    CVNoseworks
    Answered on July 27, 2017 at 02: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

  • Profile Image
    Nik_C
    Answered on July 27, 2017 at 02: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!

  • Profile Image
    CVNoseworks
    Answered on July 27, 2017 at 03: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

  • Profile Image
    Nik_C
    Answered on July 27, 2017 at 03: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!