How to have checkboxes aligned under columns

  • Profile Image
    alg211
    Asked 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!

     

  • Profile Image
    idarktech
    Answered 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
    alg211
    Answered on July 05, 2012 at 12:57 AM

    Thanks very much.

  • Profile Image
    alg211
    Answered 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
    idarktech
    Answered 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
    idarktech
    Answered 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.