How to use CSS to create a matrix like table positioning of fields

  • annefarley
    Asked on November 14, 2017 at 8:38 PM

    However can you explain how the CSS is built.

    I have another form I want to do this with but can't understand the CSS that has been built.

    I thought it would have to list the field id and then change the border\vertical spacing

    This is the new form.

    https://form.jotform.co/73117512979867

    I want to change #input_30 #input_34 #input_35 #input_37 and the 4 rows below to look more like a table.

    Is there a good guide you can recommended to help newbies to learn CSS

  • jonathan
    Replied on November 14, 2017 at 8:45 PM

    First, you need to identify the field IDs and Names of the fields on the form.

    User guide: How to Find Field IDs and Names

    so that you can assign the CSS rules to those fields...

    User guides:

    How to Inject Custom CSS Codes

    Customize Your Form Using Custom CSS Codes

    Setting up Form Columns


    Let us know if you need help on specific CSS codes on your form.

    Thanks.



  • Anne Farley
    Replied on November 15, 2017 at 11:51 PM

    Yes can I please get some help on the specific CSS for the form.

    I did already know how to find the field names but the reference material on the CSS doesn't show me what I want to do.

    So if you could give me the specific CSS

    I want to change #input_30 #input_34 #input_35 #input_37 and the 4 rows below to look more like a table.

    Is there a good guide you can recommended to help newbies to learn CSS

    That will help me learn how to do it better in the future.

  • Nik_C
    Replied on November 16, 2017 at 6:50 AM

    We can only provide you with CSS that will line up those fields more in table-like view:

    1510832877Screen Shot 2017 11 16 at 12 Screenshot 10

    Here is the CSS to line them up like above:


    input#input_34 {

        margin-left: -60px;

    }

    input#input_38 {

        margin-left: -60px;

    }

    input#input_43 {

        margin-left: -60px;

    }

    input#input_47 {

        margin-left: -60px;

    }

    input#input_51 {

        margin-left: -60px;

    }

    label#label_34 {

        margin-left: -60px;

    }

    input#input_35 {

        margin-left: -60px;

    }

    input#input_39 {

        margin-left: -60px;

    }

    input#input_44 {

        margin-left: -60px;

    }

    input#input_48 {

        margin-left: -60px;

    }

    input#input_52 {

        margin-left: -60px;

    }

    label#label_35 {

        margin-left: -60px;

    }

    input#input_37 {

        margin-left: -60px;

    }

    input#input_40 {

        margin-left: -60px;

    }

    input#input_45 {

        margin-left: -60px;

    }

    input#input_49 {

        margin-left: -60px;

    }

    input#input_53 {

        margin-left: -60px;

    }

    label#label_37 {

        margin-left: -60px;

    }

    I would advise you to check https://www.w3schools.com/css/ if you want to check more about CSS rules.

    Let us know how it worked.

    Thank you!