How to align the labels with the fields on my form?

  • Profile Image
    omaruko
    Asked on November 08, 2017 at 09:24 PM

    To whom it may concern and @Rose

    This thread is to continue with the below URL.

    https://www.jotform.com/answers/1286427-Field-labels-are-not-aligned#13

     @Rose

    Let me confirm and ask you as follows

    1.Do I use the following URL?

    https://gyazo.com/35f377074d6d9b35cb481f43bc995b2f

    2.If so, do I enter the below code into the CSS dialog 1?

    .form-line.form-line- {

      padding-left: 18px !important;

    }

    https://gyazo.com/5798dd6972db3a304fae533140d2370f

    3.I would like to know how you take the figure,18px

    Looking forward to having a reply from you.



  • Profile Image
    Kevin_G
    Answered on November 08, 2017 at 10:30 PM

    1 & 2. Yes, you you're on the correct section to inject the code. Here is also a guide that will help you injecting the code: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    Also, there is a missing "column" on your code, here is the correct: 

    .form-line.form-line-column {

      padding-left: 18px !important;

    }


    3. The "18px" is the value needed to display the labels aligned with the fields, you may either increase or decrease the value and see how it affects the labels. 

    If you have further questions, let us know. 

  • Profile Image
    Nik_C
    Answered on November 10, 2017 at 02:59 AM

    You can see the difference below:

    1510300657screencast.gif

    With reducing the pixels for padding-left, fields will be moved to the left, since the padding is decreasing.

    Let us know if you have any further questions.

    Thank you!