How to align checkboxes to be right in front of the text and not bellow it?

  • demamp
    Asked on May 18, 2015 at 8:44 AM

    Hi there!

    How can I make "ballpoint pen" and "fountain pen" check boxes right in front of "Pen :" and "Ink" instead of below them? I know I have to edit the CSS code but I really don't know how to write it.

    Thank you guys!

  • Charlie
    Replied on May 18, 2015 at 10:04 AM

    Hi,

    You can do that by first setting the "Label Align" to "Left" of your check boxes.

    How to align checkboxes to be right in front of the text and not bellow it? Image 1 Screenshot 30

    After that, in your Form Designer Tool under CSS tab, add this custom CSS code.

    /*Width for Pen label and check boxes*/

    #label_31 {

        width : 100px !important;

    }

    #cid_31 {

        width : 300px !important;

    }

     

    /*Width for Ink label and check boxes*/

    #label_30 {

        width : 100px !important;

    }

    #cid_30 {

        width : 300px !important;

    }

    How to align checkboxes to be right in front of the text and not bellow it? Image 2 Screenshot 41

     

    I cloned your form for testing purposes, you can check it here: http://form.jotformpro.com/form/51373615580960?. You can also clone my form if you would like to use it instead.

    Do let us know if you need more help on this.

    Thank you.

  • demamp
    Replied on May 18, 2015 at 11:04 AM

    Thank you Charlie, it works great!

  • Charlie
    Replied on May 18, 2015 at 11:21 AM

    Glad to help. If you need any assistance again, please do not hesitate to open a new thread here in the forum.

    Thank you.

  • demamp
    Replied on May 18, 2015 at 1:35 PM

    Hi Charlie,

    I'm really sorry to bother you again but it seems like the checkboxes are not perfectly aligned to the text... Is there a CSS code I should add to correct the issue?

    Thank you!

  • Ben
    Replied on May 18, 2015 at 2:24 PM

    I am looking at this jotform: http://www.myjotform.com/form/51152018255547

    Based on what I see the text is properly aligned with the checkbox, but I do let us know if that is not the same as what you see.

    This is what I see:

    How to align checkboxes to be right in front of the text and not bellow it? Image 1 Screenshot 30

    If we take a real good look at it, we could lower the circle for 1 pixel down so that there is 1 extra pixel under the letter p and just one above the umlaut above the A. Is this what you have meant?

    If so than this is the code that you are after:

    .form-checkbox-item:not(#foo) label:before {
        margin-top: 1px;
    }

    This will make it look like so:

    How to align checkboxes to be right in front of the text and not bellow it? Image 2 Screenshot 41

    If you notice on the right, the text is in the exact middle, but on the left it looks a bit off to me, as if the text is at a higher level.

    If you still want to use the CSS above you can add it to your jotform by following the steps here: Inject Custom CSS Codes

    Do let us know how it goes.

  • demamp
    Replied on May 18, 2015 at 5:19 PM

    Hello Ben!

    Sorry I should have been more specific. My mistake!

    What I meant was that "Type of stylo" and "couleur" are not perfectly aligned with the checkboxes:

    How to align checkboxes to be right in front of the text and not bellow it? Image 1 Screenshot 20

    but it might be because the fonts are different. If so, how can I change them as well as their weight?

    Thank you

  • Ben
    Replied on May 18, 2015 at 5:42 PM

    Oh OK, my bad :) I presumed that you meant the checkbox as one and its own label as the other.
    Now in regards to this, yes you could do both with a bit of CSS.To move it up to align properly you could add this CSS code:#label_30, #label_31 {
        position: relative;
        top: -3px;
    }Now if you also wish to change the font, you can simply modify the above to be as such:#label_30, #label_31 {
        font-family: Arial;
        position: relative;
        top: -3px;
    }Do let us know how it looks and if you wish, you can modify the top property above to match your desired output.

  • demamp
    Replied on May 19, 2015 at 4:14 AM

    It works perfectly, thanks Ben! Love your hair btw

     

    Cheers

  • Boris
    Replied on May 19, 2015 at 5:20 AM

    On behalf of my colleague, you are welcome. (I will forward your kind remark on his hair, I'm sure he will be happy to hear that.)

    Please don't hesitate to contact us again if you have other questions or problems with your forms, we will be happy to help.