How do I edit the matrix dynamique widget so it looks like this (see photo)?

  • Profile Image
    pzferrer
    Asked on December 15, 2017 at 08:59 PM
  • Profile Image
    Jim_R
    Answered on December 15, 2017 at 09:52 PM

    Does it have to be the Matrix Dynamique Widget? I'm asking because if you're expecting a definite set of answers, it's better to use the INPUT TABLE field to collect these data from your respondents.

    The Matrix Dynamique Widget is meant to be used for answers that are indefinite (e.g. you don't know beforehand how many entries your respondents will enter on the field).

    Knowing this other alternative, please consider and weigh your options first and once you're decided which one to use, let us know and we'll help you in figuring out the CSS codes you need to design the field as close as possible to the screenshot you sent.

  • Profile Image
    pzferrer
    Answered on December 16, 2017 at 08:04 PM

    Hi, Jim, thanks for the quick reply. I tried the input table yesterday, but I couldn't edit the radio buttons out to make them fillable like what I wanted to achieve in my table above...The options for the radio buttons are just the ff: require, move up, shrink, duplicate, hide, delete, conditional logic, and manage multiple fields (see image).

    Sincerely, 

    Bianca 1513472644how-to-edit-input-table.jpg

  • Profile Image
    BDAVID
    Answered on December 16, 2017 at 08:18 PM

    Click on the gear icon, then go to Fields tab, and select "Text box" for the input type:

    1513473497textbox.png

    Let us know if you need more help.

  • Profile Image
    pzferrer
    Answered on December 17, 2017 at 07:38 PM

    Thanks, David. Your idea worked. Is there a way though to add rows to the input table without the labels on the left (see image below)?

    1513557497editing-input-table.jpg

  • Profile Image
    tina
    Answered on December 18, 2017 at 02:34 AM

    In order to make row labels hidden,


    1. Go to Form Designer, click on CSS tab.

    2. Please copy and paste the following CSS code.

    3. Save the field changes.

    The CSS code:

    .form-matrix-row-headers {

        visibility : hidden;

    }

    tbody>tr:first-child{border-bottom-style:hidden;

    }

    You can behold these instructions on the following gif:

    1513582411css.gif

    I hope that helps.

    If you need any further assistance,  please let us know.