Input Table: How to add a row with text only at the bottom of the table?

  • Profile Image
    carinassilveira
    Asked on September 10, 2017 at 07:32 PM
    Ainda assim não tenho como criar uma última coluna apenas com texto, vejam
    abaixo. Preciso ter mais uma coluna aí no final parecida com a primeira
    coluna.
  • Profile Image
    Kevin_G
    Answered on September 10, 2017 at 07:33 PM

    It's not possible to add text at the bottom of the Input Table, but there is a workaround that you may follow, here are the steps: 

    1. Add a text element right below the Input Table on your form. 

    2. If you want to have some headers, you could add a table like this on the source code of the text element: 

    <table class="form-matrix-table" summary="" cellspacing="0" cellpadding="4" data-component="matrix">

    <tbody>

    <tr>

    <th class="form-matrix-column-headers">Very Satisfaced</th>

    <th class="form-matrix-column-headers">Satisfaced</th>

    <th class="form-matrix-column-headers">Somewhat Satisfaced</th>

    <th class="form-matrix-column-headers">Not Satisfaced</th>

    </tr>

    </tbody>

    </table>

    You may add a new header by adding a new "th" tag, please use the same class like the example above so the headers have the same layout than the Input Table. 

    Also, you may just add the text, without any table. 

    3. Inject the following CSS code to your form that will help you displaying the text element right below the Input Table, do note that the "margin-top" and "left" values may change according to the position of the fields on your form, you may change them if you want:

    #fieldID {

        padding: 0px;

        margin: 0px;

        width: auto !important;

        position: absolute;

        margin-top: -33px;

        left: 147px;

        z-index: 100;

    }

    The "fieldID" can be found if you open your form in a new tab and right click on the text element, copy the ID attribute value of the <li> element: 

    Here's an example about how this would work: https://form.jotformpro.com/70767676014967 

     

    I hope this helps.