column alignment issues

Hello Jotform Support!

 

I'm having a hard time lining up the columns on my form, I've tried researhing but I just can't figure out the css code or how to do this.

I would like to be able to have the following fields aligned right, so theyre all the same distance from the right edge of the form

Unit, Email Address, time of appointment, appraiser name

and then the "purchaser name" and "note field" would fill up the whole width of the form so they are aligned with both the left and the right margin.

I've been messing around with this for an hour now and I just can't figure it out.  Which section would this be in the "CSS Helper"? Margins?

Please check my test form https://form.jotform.com/63625957414968

Did you meant something similar?

I used the advance Form Designer to Enable form columns in the form layout.

 

and then I added the CSS codes

.form-textbox {

    width : 100%;

}

.form-textarea {

    width : 100%;

}

 

Let us know if this is not how you meant.

Thanks.

 

 

Hi there,

This looks so much better, but some of the boxes are too wide now. 

is it possible to shrink unit number so that the size is small enough to enter 6 or so digits and also shrink down the telephone number for approx. 8 digits and then have it so that only the far edges of the boxes in column 2 are aligned so they're flush with the edge of the form? right now, it looks like column 2 is aligned left, so it would be better if it was aligned right.

best,

Jennifer

Hi Jennifer,

Please check my test form https://form.jotform.com/63625957414968  again.

 

For the input width (Textboxes, Phone number), you can manually set the width using the Size property on the top toolbar.

 

 I also have to use the ff: CSS codes to achieve the right-alignment for the right column fields.

.form-textarea {

    width : 100%;

}

.form-line.form-line-column.form-col-2.jf-required {

    width : auto !important;

    float : right;

}

#id_16 {

    width : auto !important;

    float : right !important;

}

#id_34 {

    width : auto !important;

    float : right !important;

}

#input_19 {

    width : 100%;

}

#input_23 {

    width : auto !important;

    float : right !important;

}

.form-label.form-label-top {

}

#label_21 {

    margin-right : 0px !important;

    text-align : right !important;

}

#label_16 {

    margin-right : 0px !important;

    text-align : right !important;

}

#label_23 {

    margin-right : 0px !important;

    text-align : right !important;

}

 

#label_34 {

    margin-right : 0px !important;

    text-align : right !important;

}

=========================================

 

Let us know your feedback on the new version.

Thanks

 

 

That looks so wonderful! thank you very much!

@pinkinkllc,

Your question has been moved to a different thread and it can be found here: https://www.jotform.com/answers/1021015 

We  will assist you on that thread as soon as possible.