How can I adjust the column width of check boxes?

  • Profile Image
    gingerbebco
    Asked on January 15, 2015 at 03:23 PM

    I searched through the forum and tried the CSS suggestion, but my check box options are still spilling over onto 2 lines. On the link below, please click through to Step 5 at the bottom to see the problem.

  • Profile Image
    raul
    Answered on January 15, 2015 at 04:24 PM

    I've checked your form on 3 different browsers and was unable to see the checkboxes arranged in 2 columns. Were you able to fix the issue?

    This is how I see the mentioned checkboxes on my side.

    FireFox

    Chrome

    Internet Explorer

    Please let us know which browser/version are you using to test your form. I also suggest that you clear your browser's cache to see if it helps.

    Best Regards.

  • Profile Image
    gingerbebco
    Answered on January 15, 2015 at 04:37 PM

    Thank you for responding. I am still seeing 2 columns in both Firefox & Explorer and I have cleared the cache. I need to know how to expand the column width so that the text doesn't kick down to 2 lines.

  • Profile Image
    raul
    Answered on January 15, 2015 at 04:49 PM

    You can use the Spread Columns button on the top bar to split the checkboxes on the desired number of columns.

    Another way is to open your form in the form designer, open the CSS tab and select any of the checkboxes. This will provide you the CSS class of the checkboxes that will let you adjust the width to the value of your preference.

  • Profile Image
    gingerbebco
    Answered on January 15, 2015 at 05:14 PM

    It's still not working... the options still spill over into 2 lines and mess up the spacing.

  • Profile Image
    gingerbebco
    Answered on January 15, 2015 at 05:15 PM

    I followed your instructions and added the CSS code in Designer. I'd like to keep them to 2 columns, but each option should remain 1 line and not 2.

  • Profile Image
    raul
    Answered on January 15, 2015 at 06:03 PM

    Please check the following cloned version of your form: http://form.jotformpro.com/form/50146595353962

    Is this how you want to show the checkboxes? If so, you need to spread the checkboxes into 2 columns and the inject the following CSS code to your form:

    .form-checkbox-item label {
      width : auto;
    }

    .form-checkbox-item {
      width : 300px !important;
    }

    If not, please provide a screenshot with an example of how you want them to look like and we'll be happy to help you.

    Thank you.

  • Profile Image
    gingerbebco
    Answered on January 16, 2015 at 12:02 PM

    You are awesome - thank you. That worked! One more thing now - I have my columns set to 2, but it's displaying as 1...

  • Profile Image
    gingerbebco
    Answered on January 16, 2015 at 12:04 PM
  • Profile Image
    Ben
    Answered on January 16, 2015 at 01:13 PM

    Hi,

    In my colleague's name, you are welcome and I am glad to hear that it had worked for you.

    Can you please tell us if the issue is still present?

    When I went to the link you have provided I see that they are shown in 2 columns.

    Best Regards,
    Ben

  • Profile Image
    gingerbebco
    Answered on January 16, 2015 at 01:51 PM

    Hi Ben,

    The issue has been resolved. Thank you very much. :)

  • Profile Image
    Jan
    Answered on January 16, 2015 at 02:57 PM

    On behalf of Raul and Ben, you're welcome. Let us know if you need further assistance.

    Thank you for choosing JotForm.