How to display 4 columns in Image checkbox widget?

  • Profile Image
    art_crate
    Asked 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).

     

     

  • Profile Image
    jonathan
    Answered 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
    jonathan
    Answered 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
    art_crate
    Answered 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
    Charlie
    Answered 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
    Charlie
    Answered 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
    art_crate
    Answered 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
    Chriistian
    Answered 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
    art_crate
    Answered 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
    beril
    Answered 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
    art_crate
    Answered on June 04, 2016 at 03:29 AM

    Thanks Beril,

    that did the trick!