Need to align 4 items in one line

  • b.m.ezzat
    Asked on April 19, 2016 at 7:28 PM

    Dears

    For below menu i need to have the 4 fields (item, price, quantity and total price) all in one line and to be aligned together when adding more items

    May be like adding a table here

    Could you support me in this i would like to have it organizzed and looks easy for end user to use

    Need to align 4 items in one line Image 1 Screenshot 20

  • b.m.ezzat
    Replied on April 19, 2016 at 7:34 PM

    i managed to put the 4 fields in one line but still not aligned together

  • Chriistian Jotform Support
    Replied on April 19, 2016 at 10:53 PM

    Please inject the custom css below to fix the alignment of the items:

    .form-line-column {

        width: 130px!important;

        padding-top: 0px;

        padding-bottom: 0px;

    }

    .form-line-column p {

        margin-bottom: 0px;

    }

    .form-line-column select {

        width: 100px!important;

    }

    Once the CSS has been injected, the fields should look like the screenshot below:

    Need to align 4 items in one line Image 1 Screenshot 20

    Here's a cloned version of your form where I applied the css: www.jotform.com/61098354073962 

    If you need further assistance please let us know.

  • b.m.ezzat
    Replied on April 20, 2016 at 2:31 AM

    Thanks Chriistian

    It looks great but still needs some tuning, can i increase the size of first column (the item filed column) to be around 40% of the total width of the row, while the other 3 columns to be narrower so that each column would be around 20% of the total width

  • b.m.ezzat
    Replied on April 20, 2016 at 3:00 AM

    May be i would need first column to be 40% width

    Second column 30% width

    Third and fourth each 15% width

  • Chriistian Jotform Support
    Replied on April 20, 2016 at 4:19 AM

    I have updated the css to fit your requirement. Please remove the previous css and inject the one below instead:

    .form-line-column {

        width: 130px!important;

        padding-top: 0px;

        padding-bottom: 0px;

     

    }

    .form-line-column p {

        margin-bottom: 0px;

    }

    .form-col-1 {

        width: 40%!important;

        padding-left: 20px!important;

    }

    .form-col-2 {

        width: 30%!important;

    }

    .form-col-2, .form-col-3 {

        padding-left: 0px;

        padding-right: 0px;

    }

    .form-col-3, .form-col-4 {

        width: 15%!important;

    }

    .form-line-column select {

        width: 80px!important;

    }

    .form-col-4 {

        padding-left: 20px;

        padding-right: 0px;

    }

    Need to align 4 items in one line Image 1 Screenshot 20

    If you need further assistance, please let us know.
    Regards.