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

  • Heckington
    Asked on March 25, 2018 at 9: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

  • David JotForm Support Manager
    Replied 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 Screenshot 10

  • Heckington
    Replied on March 28, 2018 at 4: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 Screenshot 10

  • BornaSepic
    Replied on March 28, 2018 at 6: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:

    answers Screenshot 10I hope this helps!

  • Heckington
    Replied on March 28, 2018 at 6:54 AM

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