Changing the width of the checkbox options

  • Profile Image
    HaleyJordan
    Asked on May 14, 2017 at 03:15 PM
    For the check-box field on page 3, I am looking not for an extra column but to have two columns and have more space between them so that the check-boxes align properly. is this possible?
  • Profile Image
    Jan
    Answered on May 14, 2017 at 03:56 PM

    Please use the CSS code below to increase the width of the checkbox options:

    #id_26 .form-multiple-column .form-radio-item, #id_26 .form-multiple-column .form-checkbox-item {
    width: 290px !important;
    }

    Here's the result:

    Hope that helps. Thank you.

  • Profile Image
    HaleyJordan
    Answered on May 14, 2017 at 06:58 PM

    Thanks so much for your help. I would also like the check-box question on page one of the form to have the same spacing. Would you be able to send along a CSS code to make that happen?

    Thank you!

  • Profile Image
    jonathan
    Answered on May 14, 2017 at 07:31 PM

    I changed the custom CSS code to this

    #id_26 .form-multiple-column .form-radio-item, #id_26 .form-multiple-column, .form-checkbox-item {

    width: 290px !important;

    }

     

    this fixes the issue.

     

     

  • Profile Image
    HaleyJordan
    Answered on May 14, 2017 at 07:59 PM

    Thanks so much. When I added this code, the check-box question on the first page of the form aligned correctly, however the formatting for the check-box questions on the second and third pages got messed up.

  • Profile Image
    Chriistian
    Answered on May 14, 2017 at 11:19 PM

    I'm currrently checking your form. Please allow me some time to further investigate. I'll get back once I've found results.

    Regards.

  • Profile Image
    Chriistian
    Answered on May 14, 2017 at 11:35 PM

    Hi again,

    Could you please try this CSS code instead and see it this helps to solve the issue on Checkbox options?

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

        width: 260px;

    }

    After injecting this CSS code, here's the result:

    In addition, I also noticed when I cloned your form that you have some errors on your CSS, kindly fix this so that you will achieve  the desired result.

    Regards.

  • Profile Image
    HaleyJordan
    Answered on May 15, 2017 at 12:13 PM

    Thank you. How do I go about fixing the errors in the CSS?

    Now, the tabs feature at the top of the form no longer fits on one horizontal line, and some of the questions are squeezed and no longer stretch across the width of the entire form (Photos of both issues included below).

    The second issue is happening on all of my Jotforms, not just this one. See additional form formatting.

     

  • Profile Image
    david
    Answered on May 15, 2017 at 01:30 PM

    This is due to the length of the tab labels being wider than the total width of the form.  You can adjust the width of the tabs with CSS so they fit on a single line but it will cause the text to wrap.  If you can remove "ing" from each tab label, it would fit in your form.  Here is how it would look:

    https://form.jotformpro.com/71344984452967

    I also applied the following CSS directly to the tabs widget to adjust the sizing:

    .tabs-list li{

    padding: 0px;

    width: 140px;

    }

    For other styling issues, if you wouldn't mind creating a new thread for each one, we will be happy to help.

  • Profile Image
    HaleyJordan
    Answered on May 15, 2017 at 01:37 PM

    Great, thank you! Will create new thread for the other issues.