How to fix labels on checkbox and form layout?

  • HealthyBoxx
    Asked on July 27, 2019 at 2:13 PM

    my previous version was fine. don't know how i screwed it up.

    we have 2 accounts, this one and a paying one... sooooooo please

    fix/help.  thanks!

  • KrisLei Jotform Support
    Replied on July 27, 2019 at 2:52 PM

    Hi,

    I've cloned your form and I was able to fix the labels of the checkbox. You can verify the output on this link.

    If that works for you, you can inject these CSS codes. Here's how to inject custom CSS codes.


    .form-line.form-line-column.form-col-3 {

        float : left;

    }


    .form-checkbox-item label {


    }


    Let us know if you need further assistance.

  • John_Benson
    Replied on July 28, 2019 at 3:34 PM

    User reply: I am not computer savvy enough and this is only fixing 1 issue there are 4 issues I'm having a problem with.  seriously, can't you just call me and walk me thru it instead!

     

    Unfortunately, we do not offer phone support. The best way to reach us is through this Support Forum. 

    In regards to your issues, we can fix them one at a time. Please follow the steps below:

    1. In the Form Builder, click the Form Designer icon. Go to Styles tab and change the Question Spacing to "10" instead of -10. Click the Save button when you're done.

    1564341708question spacing Screenshot 10

    2. To reduce the top space, please inject this CSS code:

    .jotform-form {
    padding: 20px 0;
    }

    3. To increase the width of the 2nd option in question 1, kindly insert this CSS code:

    #cid_22 {
    max-width: none !important;
    }

    #cid_22 .form-checkbox-item {
    max-width: none !important;
    }

    4. You can unshrink the "For The Body.. choose all that apply" field. Just right-click it and select Unshrink.

    1564341949shrink Screenshot 21

    5. To fix the checkbox options/items, please add this CSS code:

    .form-radio-item, .form-checkbox-item {
    float: none;
    }

    6. You also need to add this CSS code to increase the width of the "For The Body.. choose all that apply" field:

    #cid_6 {
    max-width: none !important;
    }

    #cid_6 .form-checkbox-item {
    max-width: none !important;
    }

    Here's the final result:

    1564342433fixlabels Screenshot 32

    Here's a demo form: https://form.jotform.com/92086416631962

    Hope that helps. If you have any questions, let us know.

  • John_Benson
    Replied on July 28, 2019 at 3:53 PM

    7. In addition to that, here's a CSS fix for the Address and Shipping Address fields:

    #id_13 {
    clear: both;
    }

    8. Lastly, here's a CSS code for the last checkbox (How did you Hear about us?...):

    #cid_21 {
    max-width: none !important;
    }

    #cid_21 .form-checkbox-item {
    max-width: none !important;
    }

    Here's the result:

    1564343593lastfix Screenshot 10