Field labels are not aligned

  • Profile Image
    omaruko
    Asked on October 31, 2017 at 01:22 AM

    Hi there

    Please refer to the following URL

    https://www.jotform.com/build/72993983981479

    What is the reason the field labels are not aligned and guide me the labels are aligned

    Properly?

    Looking forward to having your reply.

  • Profile Image
    Rose
    Answered on October 31, 2017 at 03:50 AM

    When I checked your form, all the field labels' alignment are set to top and they are seen on the top when you preview the form. 

    1509436216Screen Shot 2017-10-31 at 10.5

    1509436235Screen Shot 2017-10-31 at 10.5

    Could you please elaborate the alignment problem that you have? Did you align labels to another option rather than top and they are seen aligned to top? Or, are you referring to something else?

  • Profile Image
    omaruko
    Answered on October 31, 2017 at 11:03 PM

    @Rose

    Thank you for your reply.

    >all the field labels' alignment are set to top and they are seen on the top when you preview the form. 

    I have confirmed it.

    Quote

    Did you align labels to another option rather than top and they are seen aligned to top? Or, are you referring to something else?

    Unquote

    >Did you align labels to another option rather than top

    As far as I remember, I set labels top, I do not remember how I set others.

    What I would like to do, I keep fields alignment

    Awaiting for your further reply.


  • Profile Image
    Rose
    Answered on November 01, 2017 at 03:06 AM

    If you set the label alignment to top, it seems there is no problem with your form. On the other hand, if you want to change the label alignments to something else rather than the top alignment, you can change it under label alignment section of field properties. Here are the steps you need to follow:

    1. Click to the field you want to change its label alignment.

    2. Click to "Field properties" icon.

    1509519877Screen Shot 2017-11-01 at 10.1

    3. Go to "General" section and select the option you want under the "Label Alignment" part. 

    1509519922Screen Shot 2017-11-01 at 10.1

    If you have more questions, please feel free to contact us. We would be pleased to assist you for any issue you may have. 

  • Profile Image
    omaruko
    Answered on November 02, 2017 at 02:08 AM

    @Rose

    Thank you for your reply.

    Based on your guide, I have tried it out but failed.

    To make sure, please show me the result you have tried.

  • Profile Image
    liyam
    Answered on November 02, 2017 at 05:13 AM

    Can you try the designer settings instead and see if it works there?

    You can find this on the right panel. First, click the Form Designer button.

    1509613821form_designer_button.png

    Next, go to Styles and then change the Label Alignment there.

    1509613754label_alignment.png

    If this does not work for you, it would be great if you can provide us what position that you wish for your labels to be in and we'll do the change for you.

    Thanks.

  • Profile Image
    omaruko
    Answered on November 04, 2017 at 03:34 AM

     @liyam

    Thank you for your reply.

    I tried it again, but it did not work.

    https://www.jotform.com/build/72993983981479

    My guess is that we have to transact one by one.

    Because the width varifies from dynamic text such as name to another text.

    Do you have any future to adust each width of dynamic teat?

    Looking forward to having your any further reply.



  • Profile Image
    Sabbir
    Answered on November 04, 2017 at 04:11 AM

    Sorry for the inconvenience.

    Can you please tell us what kind of alignment you are actually looking? I can see your form has some labels aligned Left and some are aligned Right.

    I made some adjustments to my cloned form.

    Please check it here: https://form.jotform.com/73072352828963

    If this is not you are looking for, then please tell us how the alignment should be.

  • Profile Image
    BJoanna
    Answered on November 05, 2017 at 05:32 AM

    The form you provided was created by one of my colleagues. If you want to position the fields on your form like that as well, you have to enable form columns inside of the Advanced Designer and set Number of Columns to 2. You can also adjust the width of form fields inside of the Form Layout tab in Advanced Designer. 

    1509877786advances designer.JPG

    1509877828form.JPG

    Here is my demo form: https://form.jotform.com/73082978251968 

    Feel free to clone it

    You can also check this guides to find more about the positioning of the form fields:

    Form Field Positioning

    How to Position Fields in JotForm

    Hope this will help. Let us know if you need further assistance. 

  • Profile Image
    BJoanna
    Answered on November 06, 2017 at 02:24 AM

    The screenshot I provided is from the Advanced Designer. You can open the Advanced Designer from the Form Designer. 

    When you change Input Width inside of the Form Layout tab, the width of all form fields will be changed. You do not have to change the width of each field separately. 

    1509952749advanced.gif

  • Profile Image
    Rose
    Answered on November 07, 2017 at 02:10 AM

    Please inject the following css code to your form to shown columns in the same order.

    .form-line.form-line-column {

      padding-left: 18px !important;

    }


    Here is the cloned form version of your form after injecting provided css code:

    1510038534Screen Shot 2017-11-07 at 10.1

    You can find the steps you need to follow to inject css code to your form in the following user guide:

    https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    If you have more questions, I can suggest you to open a new thread. Since this thread becomes very long for us to follow your request and provide you a working solution in a short time.