What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Breaking long radio button option choices into 2 lines & aligning them.

    Asked by Thymefood on October 02, 2013 at 01:28 PM

    Hi

    I have some radio button input choices that are a bit long. Tried breaking it up into 2 lines by using <br>. Unfortunately the two lines don't line up well even after I've typed in [space bar] as suggested in the forum.

    Pls advise.

    My form url: http://www.jotform.com//?formID=32744985173464

    Thank you

    Yang

    Screenshot
    choices JotForm radio button labels indent long labels wrap correctly long options wrap inline
  • Profile Image
    JotForm Support

    Answered by abajan on October 02, 2013 at 03:47 PM

    This can be resolved by clicking the radio button field and then the Spread Columns button in the toolbar and selecting how many columns you wish:

  • Profile Image

    Answered by pinoytech on October 02, 2013 at 03:51 PM

    Hi Yang,

    A workaround to align "Thousand Island Dressing and Chicken Bacon & Condiments" to other label is by using basic spacing html code "&nbsp;".

    If you need further assistance, please let us know.

    Thank you!

  • Profile Image
    JotForm Support

    Answered by abajan on October 02, 2013 at 04:33 PM

    Hi Yang,

    Now that I've seen my colleague's reply I realize that I totally misunderstood your query.

    My apologies.

  • Profile Image

    Answered by Thymefood on October 02, 2013 at 11:09 PM
    Hi,
    I tried spreading the column. Still it didn't work. It looks like this now.
    Yang
  • Profile Image

    Answered by Thymefood on October 02, 2013 at 11:13 PM
    Hi,
    Actually I tried your method & it did work, but not perfectly because I
    can't get the 2 lines to line up exactly. So the 2nd line is slightly
    indented to the right, which makes the form very untidy.
    Pls help!! I think jotform could enhance this to make it less painful to
    format.
    Thanks
    yang
  • Profile Image
    JotForm Support

    Answered by EltonCris on October 03, 2013 at 02:33 AM

    Hi Yang,

    Try to removed the spaces in your radio options and inject the following CSS codes to your form. This might help align all the radio/checkbox labels vertically.

    input[type="radio"] + label, input[type="checkbox"] + label {

    margin-left: 19px;

    float: left;

    margin-top: -16px;

    }

    Guide: How to Inject Custom CSS Codes to your Form

    Thanks!

  • Profile Image

    Answered by pinoytech on October 03, 2013 at 04:21 AM

    Hi Yang,

    Another workaround css that should fixed the issue is this:

    .form-radio-item label, .form-checkbox-item label {

    display: inline-block !important;

    }

    To see how it works, please take a look at this clone form: http://www.jotformpro.com/form/32745940030953

    If you need further assistance, please let us know.

    Thank you!

  • Profile Image

    Answered by surf_town on October 08, 2013 at 11:34 AM

    Hi there, I am using the following code to wrap my text for a responsive mobile-friendly form:

    <style type="text/css">

    .form-line-column {

    white-space: normal !important;

    }

    </style>


    And I am using this code to make my radio buttons and checkboxes format correctly:

    .form-radio-item label, .form-checkbox-item label {

    display: inline-block !important;

    }


    The only problem is that in your example the radio buttons look like this:

    And mine look like this both on laptop and mobile:

    Any suggestions?

    Thanks in advance,

    Jeremiah

  • Profile Image

    Answered by EliezerN on October 08, 2013 at 12:26 PM

    @Jeremiah

    We will be more tan glad to help you to fix your form, however we would appreciate if you open a new thread first, that will helps to avoid any confusion with the previous questions and answer of this thread. In this way we will be able to give you the proper assistance to your concern.

    Thanks for your comprehension.

  • Profile Image

    Answered by Thymefood on October 16, 2013 at 05:02 AM
    Hi,
    I've tried injecting the CSS as suggested by pinoytech. The text is aligned
    properly in editing mode. But not in the actual page & preview. Pls help.
  • Profile Image
    JotForm Support

    Answered by EltonCris on October 16, 2013 at 05:33 AM

    @Thymefood 

    Use this:

    .form-radio-item label, .form-checkbox-item label {

    display: block !important;

    margin-left: 19px;

    margin-top: -17px;

    }

    That might solved the problem. 

    May I also suggest to open a new thread next time for your next question so we can assist you accordingly.

    Regards!

  • Profile Image

    Answered by pinoytech on February 18, 2014 at 07:24 AM

    @Thymefood

    For some reasons your response came out empty. Request you to please post it again using the link bellow.

    http://www.jotform.com/answers/274565

    Thanks,