-
art_crateAsked on June 2, 2016 at 5:54 PM
Hello, On my second image 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 -
jonathanReplied on June 2, 2016 at 9: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.
-
jonathanReplied on June 2, 2016 at 9: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.
-
art_crateReplied on June 3, 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.
-
CharlieReplied on June 3, 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.
-
CharlieReplied on June 3, 2016 at 1: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.
-
art_crateReplied on June 3, 2016 at 1: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;
}
-
Chriistian Jotform SupportReplied on June 3, 2016 at 1: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.
-
art_crateReplied on June 3, 2016 at 2: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.
-
beril JotForm UI DeveloperReplied on June 3, 2016 at 5: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.
-
art_crateReplied on June 4, 2016 at 3:29 AM
Thanks Beril,
that did the trick!