I need help with field alignment

transtrumbp
Asked on August 07, 2012 at 06:23 PM

I'm trying to format fields in the second half of this form (go to the bottom and click next) where the html fields are to the right of the check box & drop down fields only when I try and shrink them, they will still not let anything sit to the left. Is this possible?

Here's the form...

http://form.jotformpro.com/form/22137160530946

Go to the second page for the big questions. I've only been working with the top 2 fields, the html and check box, to see if I can make it work. If not, I'm just putting the text in as the description to the check box/drop down fields.
JotForm Support

liyam
Answered on August 07, 2012 at 10:01 PM

Hello. Yes, it's possible to move the labels to the right and the field items to the left. You will have to do CSS injection on your form identifying the IDs of the labels, and the divs that enclose the fields. Here's the user guide on how to inject CSS on your form

Next: Here are the CSS codes for your dropdowns and its labels:

#label_14, #label_15, #label_16, #label_17, #label_19, #label_20, #label_22, #label_23, #label_25, #label_26, #label_28, #label_29, #label_31, #label_32, #label_34, #label_35, #label_36 { margin-left: 100px; padding-bottom: 16px;}
#cid_14, #cid_15 { margin-top: -35px; position: absolute;}
#cid_16, #cid_17, #cid_19, #cid_20 { margin-top: -75px; position: absolute; }
#cid_31 { margin-top: -80px; position: absolute; }
#cid_22, #cid_23, #cid_28, #cid_32, #cid_34, #cid_35, #cid_36 { margin-top: -90px; position: absolute; }
#cid_25, #cid_26, #cid_29 { margin-top: -105px; position: absolute; }

And if you want to do the same alignment on the checkbox, here's my code for you:

#label_18 { margin-left: 100px; }
#cid_18 { margin-top: -25px; }

If you have further questions, please do let us know.

Thanks.