How to Align Radio Button Options in One Row?

  • edocx
    Asked on February 22, 2016 at 9:43 AM

    How do i get the three accross check boxes "The Not to exceed section and the Asap section to align with the vertical Check boxes such as not to exceed 32 hours? Rather then the way it is now to the left. Please see the example below. 

     

    How to Align Radio Button Options in One Row? Image 1 Screenshot 20

  • mert JotForm UI Developer
    Replied on February 22, 2016 at 11:27 AM

    Hi there,

    For the "Radio Button" fields, there is a option called "Spread Columns". With that one you can decide how many columns you want for your radio button options. For example, if you select 1, it will align all three options in one column or if you set it 3, the all three options will be divided in three columns.

    Please, see it from the below:

    How to Align Radio Button Options in One Row? Image 1 Screenshot 20

     

    In addition to this, we can add some customizations to that field by using some custom CSS codes. Please, let us know, if you want further assistance.

     

    Thanks.

  • edocx
    Replied on February 22, 2016 at 12:07 PM

    I think you misunderstood my question.  Note where the not to "exceed hours is located"

     

    Can I align the not to exceed parts under that if I leve it on my form as 3 horizontal columns?

    If so how do I do that?

     

    Thank you

  • mert JotForm UI Developer
    Replied on February 22, 2016 at 12:52 PM

    Now, I understand what you really want. Please, use the following CSS to do desired changes:

     

    #id_33, #label_33 {

        text-align: center;

    }

     

    Please, see the changes from the image below:

    How to Align Radio Button Options in One Row? Image 1 Screenshot 20

     

    If you want to label on the left side again, please erase the ", #label_33" part from the code. For further assistance, please do let us know.

     

    Thanks.