Checkbox on same line as question in mobile view

  • Profile Image
    adornedwithpolish
    Asked on September 08, 2017 at 01:39 AM

    Is it possible to move the checkbox up to be on the same line as the question specifically in mobile view? I have left selected as the label alignment but the label automatically appears on top in mobile view.

  • Profile Image
    Chriistian
    Answered on September 08, 2017 at 05:11 AM

    In order for the checkbox to be on the same line as the question in mobile view, please try injecting the CSS code below:

    @media screen and (max-width: 480px), screen and (max-device-width: 767px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape)

    {

    span.form-checkbox-item {

        position: relative;

        top: -30px;

        left: 150px;

    }

    }

     

     

    Result:

    Here's the guide on How to Inject Custom CSS Codes.

    Let us know if you need further assistance.

  • Profile Image
    adornedwithpolish
    Answered on September 08, 2017 at 01:41 PM

    Hi. Thank you for your reply. I injected the code (line 294) as outlined however it still is not showing the checkbox on the same line. 

  • Profile Image
    Chriistian
    Answered on September 08, 2017 at 03:02 PM

    Here is how it appears on my end.

     

    Can you please post a screenshot of how it appears from your end? Also, may we know the device and browser you are using to access the form?

  • Profile Image
    adornedwithpolish
    Answered on September 08, 2017 at 07:15 PM

    My screen now appears that way. I'm thinking there may have just been a delay when it took effect. Now that it's in place though I see that the checkbox overlaps some of the words, like "marketing post card holder" for instance. How can I get the checkbox to be on the same line but spaced further away?

    Also, I adjusted the margins on some questions in order to make text appear underneath to make my own sublabel. For instance, "1 per person" goes closely underneath "Amethyst Clusters" to act as the sublabel. In web view it looks fine but it doesn't show properly in mobile view. How can I fix this?

     

     

  • Profile Image
    Mike_G
    Answered on September 08, 2017 at 09:48 PM

    I was able to see the issues you described on an Android phone. Please give me some time to further test it and I will get back to you with a solution as soon as possible.

  • Profile Image
    adornedwithpolish
    Answered on September 09, 2017 at 01:18 PM

    Thank you for your reply. I entered the code as you suggested. It shows when I do the mobile preview online however it doesn't actually show correctly on my mobile device.

  • Profile Image
    Mike_G
    Answered on September 09, 2017 at 06:00 PM

    Thank you so much for the update.

    I checked your form and I didn't see the CSS codes I provided injected in it now. I can only assume that you might have removed it right after you tested it and it didn't work. Just to be sure, did you remove the CSS codes (line 294) provided by my colleague above when you tested your form with the new CSS codes?

    Here's the form I have used for testing that has the new CSS codes — https://form.jotformpro.com/72508407682965

    Please check it also on your end and see if it still has the same result.

    Also, may we know the device you are using to test the form(s)? And if you can send us a screenshot of how it looked like on your end, please? — How-to-Post-Screenshots-to-Our-Support-Forum

    We will wait for your response.