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

    Left-justifying wrapped text for both radio-buttons and checkboxes

    Asked by surf_town on October 08, 2013 at 11:37 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

    Page URL:
    http://surftown.myshopify.com/

    checkboxes checkbox radio buttons problem style
  • Profile Image

    Answered by pinoytech on October 08, 2013 at 12:46 PM

    Hi Jeremiah,

    Sorry for the inconvenience that may have caused. Can you please try to replace your current css code from:

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

    display: inline-block !important;

    }

    To:

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

    display: inline-block !important;

    margin-left: 19px;

    float: left;

    margin-top: -17px;

    }

    Feel free to contact us again if you need further assistance.

    Thank you!

  • Profile Image

    Answered by surf_town on October 08, 2013 at 01:07 PM

    Hey there, thanks for your reply. The formatting is still off. I really don't understand how a negative margin-top is a solution. What is best practice for radio-buttons and checkboxes? I am surprised that left-justified text is not standard for the both.

  • Profile Image

    Answered by pinoytech on October 08, 2013 at 01:18 PM

    Hi,

    Your form seems to working fine upon checking. Have you tried already clearing your browser cache and cokies? If not, please give a try.

    Thank you!

  • Profile Image

    Answered by surf_town on October 08, 2013 at 01:55 PM

    Thanks, I have cleared the cache and it works in Safari and Chrome but not Firefox or iPhone.

    Can you please check it in Firefox and a real iPhone?

    In Firefox the negative margin separates the text from the checkbox or radio-button.

    On the iPhone the first three checkboxes are thrown to the right.

  • Profile Image

    Answered by pinoytech on October 08, 2013 at 02:42 PM

    Hi,

    My apologies about that. Would you mind if I'm going to access your form for further assistance?

    Thank you!

  • Profile Image

    Answered by Jeremiah on October 08, 2013 at 03:31 PM

    Not at all. Please go ahead and have a look. I made a clone of the form anyway.

  • Profile Image
    JotForm Support

    Answered by EltonCris on October 08, 2013 at 06:05 PM

    Hi Jeremiah,

    I've fixed the display on FF using the following browser specific CSS. Check your form: http://www.jotformz.com/form/32794938952674

    .form-radio-item label, .form-checkbox-item label,  x:-moz-any-link, x:default  {

    display: block !important;

    margin-left: 24px;

    margin-top: -17px;

    float:none !important;

     }

    Edited: the following CSS works on any browser.

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

    display: block !important;

    margin-left: 19px;

    margin-top: -17px;

    }

    On the iPhone view, it seems to be fine? We used browserstack facility, with iOS simulator. We've tested it on the iPhone 5/iOS6

    Let us know if it displays differently on your side.

    Thanks!

  • Profile Image

    Answered by surf_town on October 08, 2013 at 06:27 PM

    I have cleared my safari cache on my iPhone and am still getting this:

     

    :( No idea. What is so strage is that it's only the first three checkboxes that are messed up. Even the radio-buttons are ok after that. Do you think it has to do with the latin-characters?

  • Profile Image
    JotForm Support

    Answered by EltonCris on October 08, 2013 at 06:29 PM

    No, I guess. Don't you worry, we will help you figure that out.

    Thanks for the screen! =)

    We'll get back to you as soon as we found solution.

    Regards!

  • Profile Image

    Answered by surf_town on October 08, 2013 at 06:37 PM

    Cool, thx. Standing by.

  • Profile Image
    JotForm Support

    Answered by EltonCris on October 09, 2013 at 03:48 AM

    @surf_town

    Sorry for the delay. Check it again now. http://www.jotformz.com/form/32794938952674

    Thanks!

  • Profile Image

    Answered by surf_town on October 09, 2013 at 09:52 AM

    Hey there it looks great! I have to say that's some css I have never seen before but whatever works. You may have noticed I am selling responsive websites so I guess having the application form work on mobile is kind of a must right, ha! Have a great day JotForm Support!

    -JS

  • Profile Image

    Answered by surf_town on October 09, 2013 at 09:57 AM

    Checkboxes and radio-buttons looking good! Thanks again.

  • Profile Image

    Answered by anchal  on March 01, 2016 at 12:15 PM

    testing for my website to check radio button working

  • Profile Image

    Answered by Huberson on March 01, 2016 at 01:27 PM

    Thank you for the that!