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

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

  • Profile Image
    pinoytech
    Answered 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
    surf_town
    Answered 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
    pinoytech
    Answered 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
    surf_town
    Answered 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
    pinoytech
    Answered 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
    Jeremiah
    Answered 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
    EltonCris
    Answered 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
    surf_town
    Answered 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
    EltonCris
    Answered 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
    surf_town
    Answered on October 08, 2013 at 06:37 PM

    Cool, thx. Standing by.

  • Profile Image
    EltonCris
    Answered 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
    surf_town
    Answered 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
    surf_town
    Answered on October 09, 2013 at 09:57 AM

    Checkboxes and radio-buttons looking good! Thanks again.

  • Profile Image
    anchal 
    Answered on March 01, 2016 at 12:15 PM

    testing for my website to check radio button working

  • Profile Image
    Huberson
    Answered on March 01, 2016 at 01:27 PM

    Thank you for the that!