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

    Screenshot
  • 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
    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,