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

  • Profile Image
    annefarley
    Asked on November 14, 2017 at 08: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

  • Profile Image
    jonathan
    Answered on November 14, 2017 at 08: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.



  • Profile Image
    Nik_C
    Answered on November 16, 2017 at 06: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.5

    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!