- JontyAsked 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.
- grassmediaAnswered 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?
- JontyAnswered on April 14, 2014 at 09:23 AM
Thanks for replying. Labels are already set to Top Aligned.
- grassmediaAnswered on April 14, 2014 at 09:37 AM
Ah apologies - so what's the text out to the left, just a text box?
- JontyAnswered 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!
- grassmediaAnswered 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?
- JontyAnswered 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!!
- EliezerNAnswered on April 14, 2014 at 11:50 AM
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.
- EliezerNAnswered on April 14, 2014 at 11:52 AM
Thank you very much for your help, we really appreciate your proactiveness and will to help other users.
- JontyAnswered 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!!
- grassmediaAnswered on April 14, 2014 at 12:11 PM
lol you're welcome, and I nearly got it right ;)