column alignment issues

  • Profile Image
    iconadmin
    Asked on December 28, 2016 at 02:50 PM

    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?

  • Profile Image
    jonathan
    Answered on December 28, 2016 at 03:42 PM

    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.

     

     

  • Profile Image
    iconadmin
    Answered on December 28, 2016 at 03:54 PM

    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

  • Profile Image
    jonathan
    Answered on December 28, 2016 at 04:34 PM

    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

     

     

  • Profile Image
    iconadmin
    Answered on December 28, 2016 at 04:54 PM

    That looks so wonderful! thank you very much!

  • Profile Image
    pinkinkllc
    Answered on December 28, 2016 at 07:12 PM

    Hi,

     

    Can you assist me with the alignment of my form:

     

    https://www.jotform.com/63498505483163

  • Profile Image
    Kevin_G
    Answered on December 28, 2016 at 10:16 PM

    @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.