How to set 2 columns checkbox to take 100% width of the form?

  • Profile Image
    Triacees
    Asked on February 08, 2017 at 09:32 AM

    I have made in my form a question with multiple answers, so I use the checkbox option. However, I want to display the multiple choices over a 2 column layout. I want to use the full width  for those 2 columns. How can I do that?

  • Profile Image
    Kiran
    Answered on February 08, 2017 at 10:48 AM

    I understand that you want to display the checkbox field options in two columns. You can split the columns of the Checkbox field from the field properties.

    The field should be displaying as shown below if the columns are set to 3.

    Hope this information helps! Let us know if you are referring something different. We will be happy to help. 

  • Profile Image
    Triacees
    Answered on February 09, 2017 at 10:55 AM

    When I choose a 2 column layout this way, I want to evenly divide the 2 columns over the available width of the page.

    Is that possible?

  • Profile Image
    Kiran
    Answered on February 09, 2017 at 12:16 PM

    Please inject the following CSS code to the form so that the checkboxes will be displayed half of the width of the form.

    .form-checkbox-item {

    width: 50%;

    }

    Hope this information helps! 

  • Profile Image
    Triacees
    Answered on February 09, 2017 at 12:30 PM

    I love your fast responses! Great work!

    Indeed this code gives the wanted result when I build the form, however its not working in the 'live'-form.

  • Profile Image
    Kiran
    Answered on February 09, 2017 at 01:41 PM

    If you are working on the form http://www.jotform.co/form/70332581771859, I see that the code is not injected to the form. Please add the CSS code to the form so that the checkboxes should be displaying correctly. 

    If you are referring to a different form, please let us know. We will be happy to take a look for you.

    Thanks!

  • Profile Image
    Triacees
    Answered on February 10, 2017 at 04:11 AM

    I injected the CSS code you gave to me. But it is still not working in the live form.

    I tried different browsers: Safari, Firefox and Chrome.

  • Profile Image
    Mike
    Answered on February 10, 2017 at 04:56 AM

    Please update provided CSS to:

    .form-multiple-column .form-checkbox-item {
    width : 50%;
    }

    It should fix the issue on published form.