Android device form check box items have wrapping issues

  • Profile Image
    Laura  
    Asked on July 16, 2015 at 03:18 PM

    Hi there,

    We have a form that seems to display fine on my iPhone, but the formatting is a bit warped on my coworkers Android phone.  

    I've added the mobile responsive Widget, and selected for a responsive form in both my Preferences and in the Designer.

    We aren't embedding the form in a website.  We're hoping to send a link to the form in an email.

    Any suggestions you might have would be greatly appreciated!

     

    Android Display: 

     

    iPhone Display:

     

  • Profile Image
    Mike
    Answered on July 16, 2015 at 04:58 PM

    Thank you for contacting us.

    Please provide us with a from link in questions, and we would be happy to troubleshoot this issue for you.

  • Profile Image
    goodmanslibrary
    Answered on July 16, 2015 at 05:06 PM

    This is the form that I have been trying to alter.

    Thanks!

     

    https://secure.jotform.ca/form/51686614275260 

  • Profile Image
    Mike
    Answered on July 16, 2015 at 07:12 PM

    Please add the next CSS via Form Designer in order to fix the issue with labels on mobile devices.

    @media screen and (max-width: 480px) {
    .form-radio-item label, .form-checkbox-item label {
    white-space: normal;
    }
    }

    If you need any further assistance on this, please let us know.

  • Profile Image
    library30
    Answered on July 17, 2015 at 02:49 PM

    Hi there,

    I have added the CSS to the form designer and my coworker's Android phone is still displaying it in the same way.

  • Profile Image
    Mike_G
    Answered on July 17, 2015 at 03:35 PM

    Use this guide to view the Injected Custom CSS code on your form. 

    Use this codes

    @media screen and (max-width: 480px){

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

    display: block !important;

     

    }}

    and replace the CSS codes in the red box on the image below.

    I hope this helps. Let us know if you need any further assistance. Thank you. 

  • Profile Image
    library30
    Answered on July 20, 2015 at 10:41 AM

    Hi there,


    Thanks so much for your assistance.  We injected the CSS into the form and found that the alignment was fixed, but the conditional logic doesn't seem to work.

    As you can see here, the alignment is fine, but we checked Technology and the associated options aren't showing up.

     

    Again, the link to the form is here. https://secure.jotform.ca/form/51686614275260

    Any advice would be greatly appreciated!

  • Profile Image
    Welvin
    Answered on July 20, 2015 at 12:36 PM

    It's working for me using an actual android device. Here's a screenshot:

    It's working to both Google Chrome and Default Android Browser. Maybe, you should ask your colleague to clear their browser's cache.

    Thanks