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 align checkboxes to be right in front of the text and not bellow it?

    Asked by demamp on May 18, 2015 at 08: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!

    alignment check css code custom CSS
  • Profile Image
    JotForm Support

    Answered by Charlie 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.

    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;

    }

     

    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.

  • Profile Image

    Answered by demamp on May 18, 2015 at 11:04 AM

    Thank you Charlie, it works great!

  • Profile Image
    JotForm Support

    Answered by Charlie 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.

  • Profile Image

    Answered by demamp on May 18, 2015 at 01: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!

  • Profile Image

    Answered by Ben on May 18, 2015 at 02: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:

    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:

    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.

  • Profile Image

    Answered by demamp on May 18, 2015 at 05: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:

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

    Thank you

  • Profile Image

    Answered by Ben on May 18, 2015 at 05: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.

  • Profile Image

    Answered by demamp on May 19, 2015 at 04:14 AM

    It works perfectly, thanks Ben! Love your hair btw

     

    Cheers

  • Profile Image
    JotForm Support

    Answered by Boris on May 19, 2015 at 05: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.