What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    How to display 4 columns in Image checkbox widget?

    Asked by art_crate on June 02, 2016 at 05:54 PM

    Hello, On my second survey question I have 8 options, they are displaying in 3 columns. I would like them to display in 4 columns (2 rows).

     

     

    Page URL:
    https://form.jotform.com/61292179785973

    check image check box 4 columns
  • Profile Image
    JotForm Support

    Answered by jonathan on June 02, 2016 at 09:21 PM

    I assume you meant this image checkboxes on your form https://www.jotform.com/answers/852583

    I will check what CSS code is needed to have them in 4 column spread. I'll get back to this shortly.

    Thanks.

  • Profile Image
    JotForm Support

    Answered by jonathan on June 02, 2016 at 09:24 PM

    Please add this CSS codes on your existing CSS codes 

     

    .form-multiple-column {

        width : 950px !important;

    }

     

    You can check it working on my test form https://www.jotform.com/61538375481967

     

    Let us know how it goes.

  • Profile Image

    Answered by art_crate on June 03, 2016 at 12:42 AM

    Hey Jonathan,

     

    Thank you for the update! The columns look great, they are not centered. Can they be centered on the page. 

     

  • Profile Image
    JotForm Support

    Answered by Charlie on June 03, 2016 at 12:57 AM

    From the looks of it, it seems like you have already changed width to give you a 3 column display. The images are also now centered when I view it.

     

    You might also need to check your custom CSS code for errors, I see one when I cloned your form. You're missing a closing bracket "}" in one of your code blocks.

     

    If you are still having problems on this, please do let us know.

    Thank you.

  • Profile Image
    JotForm Support

    Answered by Charlie on June 03, 2016 at 01:04 AM

    I stand corrected, it seems like you wanted the 2nd page, the 8 item check box to be in 4 columns with 2 rows. If that's the specific layout you want, you can paste this custom CSS code:

    #cid_140 {

        width: 100% !important;

        max-width: 1000px !important;

    }

    It should automatically have it centered. Here's how it looks like:

     

    Note that if the screen size is small, the check box display will adjust accordingly. 

    Let us know if that works.

  • Profile Image

    Answered by art_crate on June 03, 2016 at 01:35 AM

    Hi Charlie,

    It looks like it is now centered (question 2), however it is still displaying 3 columns, instead of 4. I added the css that Jonathan supplied and it is still not working, please let me know how to proceed.

     

    .form-multiple-column {

        width : 950px !important;

    }

     

  • Profile Image
    JotForm Support

    Answered by Chriistian on June 03, 2016 at 01:50 AM

    There appears to be an error in the css, which is why the custom css is not being updated correctly. To resolve the issue, please visit your Form Designer and add a closing bracket ( } ) as seen below.

    Once the bracket has been added, the custom css should now work correctly.

  • Profile Image

    Answered by art_crate on June 03, 2016 at 02:53 AM

    Hi Chriistian,

     

    I closed the bracket, but I am still not getting the result I want. See images below. I would like 4 columns and two rows center.

     

     

  • Profile Image
    JotForm Support

    Answered by beril on June 03, 2016 at 05:09 AM

    I've cloned and tested you form. I am not able to reproduce the same issue that you’re having.

    Could you try to clear your form caches? After that, we would appreciate it if you could also test it on your side and let us know the result.

  • Profile Image

    Answered by art_crate on June 04, 2016 at 03:29 AM

    Thanks Beril,

    that did the trick!