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 have checkboxes aligned under columns

    Asked by alg211 on July 04, 2012 at 12:20 AM

    Hi there

    I've created a form for a married couple which has two columns with text input. Left side is for the female to fill out, right side is for the male to fill out, each of the questions should be aligned. I've been using 'shrink' in the text fields to try to line up everything. However, now I have a bit of a problem in that I need a checkbox to line up under the female text field on the left and one under the male text field on the right with each of the text fields above it. Unfortunately the shrink option doesn't help line them up correctly. Any way to do this?

    Thanks!

     

    Page URL:
    http://form.jotform.co/form/21767492287870

    Screenshot
  • Profile Image
    JotForm Support

    Answered by idarktech on July 04, 2012 at 02:17 AM

    Hi,

    If you know css well, you can customize your form by injecting custom css codes to your form. I have here a code that would fixed the box alignments, you may use this:

     

    #id_161, #id_170, #id_171{

    padding-left: 22px !important;

    }

    #id_163{

    margin-left: -6px !important;

    }

    #id_179{

    margin-left: -13px !important;

    }

    #id_180{

    margin-left: 92px !important;

    }

    Follow this guide: How to Inject Custom CSS Codes

    Let me know if you need anything else. Thank you!

     

  • Profile Image

    Answered by alg211 on July 05, 2012 at 12:57 AM

    Thanks very much.

  • Profile Image

    Answered by alg211 on July 05, 2012 at 01:25 AM

    Sorry, spoke too soon. I tried to apply this CSS to other checkbox fields I added with their field ID, but it's not working. What am I doing wrong?

    Also, above the checkboxes I don't want any 'question label' text, but when I deleted the 'click to edit' text, I get insteed 3 dots '...' appearing. 

  • Profile Image
    JotForm Support

    Answered by idarktech on July 05, 2012 at 03:20 AM

    Sorry for the delay. 

    Your code is actually correct but you just need to remove the !important;} before them. Anyway, I have fixed it for you, you may use this:

     

    #id_155, #id_159, #id_161, #id_168, #id_170, #id_171, #id_174, #id_175, #id_177, #id_181, #id_188, #id_192, #id_193{

    padding-left: 22px !important;

    }

    #id_163{

    margin-left: -6px !important;

    }

    #id_179{

    margin-left: -13px !important;

    }

    #id_180, #id_191, #id_194, #id_195{

    margin-left: 92px !important;

    }

    Hope this helps. Thank you.

  • Profile Image
    JotForm Support

    Answered by idarktech on July 05, 2012 at 03:22 AM

    For the DOTS (...) thing, simply use use 'space' or this HTML code    to completely remove them.

    Let me know if you need anything else. Thanks.