Input Table: How to change width of individual columns

  • Profile Image
    Heckington
    Asked on March 25, 2018 at 09:06 AM

    hi

    I have a form with an input table, but i am unable to change the width of the columns in the table.   I have tried changing the pixel size, but it does not alter it.

    Also, is it possible to change each column to be a different width according to the anticipated length of text to be entered?

    Thank you

  • Profile Image
    Mike
    Answered on March 25, 2018 at 12:24 PM

    It should be possible to adjust the width of the columns with inejcted CSS.

    Here is a CSS example:

    .form-matrix-column_0 {
    width: 110px;
    }
    .form-matrix-column_1 {
    width: 110px;
    }
    .form-matrix-column_2 {
    width: 110px;
    }
    .form-matrix-column_3 {
    width: 125px;
    }
    .form-matrix-column_4 {
    width: 125px;
    }
    .form-matrix-row-headers {
    min-width: 50px;
    }
    .form-matrix-values input {
    width: 95%;
    }

    You can play with the pixel values to adjust the columns. If you need to target a specific Input Table field it is possible too.

    Let us know if you need any further assistance.

  • Profile Image
    Heckington
    Answered on March 25, 2018 at 03:32 PM

    Thanks - this works really well, but i do need to target specific columns in the two different tables. Please could you advise how i do this?


  • Profile Image
    Jim_R
    Answered on March 25, 2018 at 04:59 PM

    You only have 2 INPUT TABLES on this form. To target a specific column on each table, use these CSS codes instead:

    #cid_76 table .form-matrix-column_2 {

        width: 200px;

    }

    #cid_78 table .form-matrix-column_2 {

        width: 200px;

    }

    #cid_76 would be the first INPUT TABLE (I wish to enter the following Sheep)

    #cid_78 would be the second INPUT TABLE (I wish to enter the following Cattle)

    Both codes above only target the 3rd column of both tables. Since you have 5 columns in total, your column classes would be 0, 1, 2, 3, 4 (following the codes given by Mike).

    As another example, if you wish to change the width of the following:

    🔘 1st table > 2nd column

    🔘 2nd table > 4th column

    Then, your codes would look something like this:

    #cid_76 table .form-matrix-column_1 {

        width: 200px;

    }

    #cid_78 table .form-matrix-column_3 {

        width: 200px;

    }

    Where:

    🔘 1st table (#cid_76) > 2nd column (.form-matrix-column_1)

    🔘 2nd table (#cid_78) > 4th column (.form-matrix-column_3)

    Alternatively, if you're having issues implementing this, just let us know which column on which table you need to adjust so we can give you the codes you need.

  • Profile Image
    Heckington
    Answered on March 27, 2018 at 10:24 AM

    Hi

    I have tried changing as per the codes above, and the column width changes on the Preview, but the input field is still the same narrow width.

    This means that when you input data, you cannot view the whole field at one time.

    I need to change the width of the input field as well as the column.

    Thank you

  • Profile Image
    Richie_P
    Answered on March 27, 2018 at 11:35 AM

    I tried the css codes given by my colleagues and they are working correctly.

    The width of the Input table increased as well as its columns, do you want to increase the height also?

    May we know the specific column you wanted to increase the width/height?


  • Profile Image
    Heckington
    Answered on March 27, 2018 at 04:25 PM

    This is what i have on my screen - the second column is wide in the table, but the input field is narrow.

    1522182297screen shot.png

  • Profile Image
    EltonCris
    Answered on March 27, 2018 at 05:47 PM

    Add this CSS codes. This should correct it.

    #id_76 .form-matrix-row-headers + 

    .form-matrix-values + 

    .form-matrix-values .form-textbox {

    width: 100%;

    box-sizing: border-box;

    }

    Result: