Input Table: How to change single column width?

  • coastalworkshops
    Asked on March 26, 2024 at 5:45 PM

    Hi there.

    I have created an input table and would like to widen the NAME column only. I have tried CSS based on other tech support responses but have not had any luck.

    As per the inspect source, I believe id_11 is the correct

    <li id="id_11" data-type="control_matrix" data-inputtype="Dynamic" data-qid="11" data-order="2" data-selectioncount="0" class="form-line clearfix isSelected lineAlignment-Auto-Left" tabindex="0" aria-label="Input Table Field " style="z-index: 2;" draggable="false"><div id="app_wizards"


    I'm not very experienced with CSS and have an additional question. Once I have this input table designed and the column width set to where I want it, I then want to duplicate this table under 14 additional collapsable tabs within the same form (as per picture). Will that column width change carry forward to all cloned tables or do will custom CSS be required for each table?


    Thanks!

  • Ryan JotForm Support
    Replied on March 26, 2024 at 10:40 PM

    Hi Stuart, 

    Thanks for reaching out to Jotform Support. Unfortunately, I am not able to open the Dropbox link that you have provided. Are you referring to the Input Table on this form? If so, you can adjust the Name column's width by injecting the CSS code in your form below:

    /* Adjust Name column's width - 13303281 */
    tr > th:nth-child(2) {
    min-width: 150px !important;
    }

    To inject the CSS Code in your form, check out the steps and screencast below:

    1. Open your form in Form Builder, and click on the Paint Roller icon on the right side of the page to open Form Designer.
    2. Under the Styles tab, scroll down and paste the code into the Inject CSS Code box.

    Input Table: How to change single column width? Image 1 Screenshot 20
    This code will apply to all of the Input Table fields that you will create if the Name column is also on the second column.

    Give it a try and let us know how it goes.

  • coastalworkshops
    Replied on March 27, 2024 at 1:43 PM

    Worked perfectly. Thanks Ryan.