Input Table Field: How to change the width of a specific column.

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

    Hi 

    I am trying to change the width of the input table so that the text can be read.


    Please advise how I do this - can I change each column so that it automatically changes for the input data?

    Thank you

  • Profile Image
    BDAVID
    Answered on March 25, 2018 at 12:13 PM

    You can use the following code: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    #id_76 table.form-matrix-table  td:nth-of-type(3) input{

    width: 200px !important;

    }

    Result:

    1521994367result.png

  • Profile Image
    Heckington
    Answered on March 28, 2018 at 04:58 AM

    When I input this new code, it only changes the one column , not all of them.

    Any idea why?    The px size is correct for each column, and the new code should cover all columns as its table specific?



    1522227455screenshot2.png

  • Profile Image
    BornaSepic
    Answered on March 28, 2018 at 06:02 AM

    Try using this custom CSS to force the input cells to use all the available space.

    td.form-matrix-values input {

    width: 100% !important;

    min-width: 70px !important;

    box-sizing: border-box !important;

    }

    This is the effect the CSS has on the table:

    1522233470Untitled3.pngI hope this helps!

  • Profile Image
    Heckington
    Answered on March 28, 2018 at 06:54 AM

    Perfect - thank you so much!  You guys are brilliant :)