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.
How can i make fields line up in neat columns?Asked by Jonty on April 14, 2014 at 08:57 AM
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.
calculation form size length thanks
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?
Thanks for replying. Labels are already set to Top Aligned.
Ah apologies - so what's the text out to the left, just a text box?
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!
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?
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!!
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:
margin-left: 60px !important;
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.
Thank you very much for your help, we really appreciate your proactiveness and will to help other users.
Thanks to everyone for the prompt responses. I can now do what I want. Jotform rocks again!!
lol you're welcome, and I nearly got it right ;)