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 can i make fields line up in neat columns?

    Asked by Jonty on April 14, 2014 at 08:57 AM

    Hi there,

    I'm creating a calculation form with quite a lot of fields in it and my client would really like all the columns to line up neatly. The first column is variable length text, then the remaining 3 columns are all the same size. All I need is for the column 2 fields to start in the same relative position and everything else will fall in to place.

    The attached screen shot will show you how it looks at the moment (and probably explains it better than I have done!).

    Look forward to hearing from you.

    Many thanks,

    Jonty.

    Screenshot
    calculation form size length thanks
  • Profile Image

    Answered by grassmedia on April 14, 2014 at 09:07 AM

    The only way I've been able to fix this is to force the label to "top".  It's not ideal and not so elegant (IMHO) but it would work.  Actrually, your first field isn't variable length becuase the field width will be as wide as the longest option as things stand.

     

    I'd be interested to hear if anyone else has a better solution?

  • Profile Image

    Answered by Jonty on April 14, 2014 at 09:23 AM

    Thanks for replying. Labels are already set to Top Aligned.

  • Profile Image

    Answered by grassmedia on April 14, 2014 at 09:37 AM

    Ah apologies - so what's the text out to the left, just a text box?

  • Profile Image

    Answered by Jonty on April 14, 2014 at 09:43 AM

    Yes. It would be fine if I could find a way of making each of the text boxes on the left the same size, but I can't!

  • Profile Image

    Answered by grassmedia on April 14, 2014 at 09:59 AM

    I'm mobile at the moment and unable to check but I think then the solution lays in the text box itself, display HTML and use in-line CSS to line things up something like

    <div style="text-align: right; padding-right: 50px;">A really long line</div>

     

    but you'd have to play around with values etc.  Must be an easier way surely?

  • Profile Image

    Answered by Jonty on April 14, 2014 at 10:01 AM

    Thanks very much - I'll play around with it. I agree with you - there must be an easier way and, if there's not there should be!!

    Cheers.

  • Profile Image

    Answered by EliezerN on April 14, 2014 at 11:50 AM

    @Jonty

    Yes, there is an easier way to accomplish what you need. Please take a look at this cloned version of your form and confirm us if that is what you are looking for: http://form.jotformpro.com/form/41034149653956

    You can clone it if you wish, here is how: How to clone an existing form from a URL

    If that is what you need, all you have to do is to inject the next CSS code to your form: 

    #id_15

    {

    margin-left: 57px!important;

    }

    #id_25

    {

    margin-left: 46px!important;

    }

    #id_31

    {

    margin-left: 60px !important;

    }

    #id_35

    {

    margin-left:59px !important;

    }

    #id_38

    {

    margin-left: 53px !important;

    }

    Here is how to inject CSS codes to form: How to inject custom CSS codes

    I hope that is what you were looking for.

    Please inform us if you need further assistance with this inquiry.

    Thanks

  • Profile Image

    Answered by EliezerN on April 14, 2014 at 11:52 AM

    @grassmedia

    Thank you very much for your help, we really appreciate your proactiveness and will to help other users.

    Thanks

  • Profile Image

    Answered by Jonty on April 14, 2014 at 12:00 PM

    Thanks to everyone for the prompt responses. I can now do what I want. Jotform rocks again!!

  • Profile Image

    Answered by grassmedia on April 14, 2014 at 12:11 PM

    lol you're welcome, and I nearly got it right ;)