What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Need to align 4 items in one line

    Asked by b.m.ezzat on April 19, 2016 at 07: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

    Page URL:
    https://form.myjotform.com/61097134175556

    items in line JotForm uploads quantity table
  • Profile Image

    Answered by b.m.ezzat on April 19, 2016 at 07:34 PM

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

  • Profile Image
    JotForm Support

    Answered by Chriistian 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:

    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.

  • Profile Image

    Answered by b.m.ezzat on April 20, 2016 at 02: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

  • Profile Image

    Answered by b.m.ezzat on April 20, 2016 at 03:00 AM

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

    Second column 30% width

    Third and fourth each 15% width

  • Profile Image
    JotForm Support

    Answered by Chriistian on April 20, 2016 at 04: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;

    }

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