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

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

  • Profile Image
    abajan
    Answered 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
    pinoytech
    Answered 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
    abajan
    Answered 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
    Thymefood
    Answered 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
    Thymefood
    Answered 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
    EltonCris
    Answered 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
    pinoytech
    Answered 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
    surf_town
    Answered 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
    EliezerN
    Answered 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
    Thymefood
    Answered 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
    EltonCris
    Answered 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
    pinoytech
    Answered 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,