Dynamic Matrix Setup

  • Profile Image
    comoapproach
    Asked on March 13, 2018 at 02:20 AM

    Hi.

    I have created a matrix that captures text. However it is too long for the form, how do i make it work? 

    My form is here: https://form.jotform.com/80658401014953

  • Profile Image
    tina
    Answered on March 13, 2018 at 08:38 AM

    Could you please follow the instructions given below.

    1) Click on the Matrix Dynamique widget and click on Widget Settings.

    1520944401Screen Shot 2018-03-13 at 3.31

    2) go to Custom CSS tab. Paste here the code given below and update widget:

    table {

        width: 100%;

    }

    table tr td,

    table tr th {

        width: 75px;

        word-wrap: break-word;

    font-size: 12px;

        display: inline-block;

        margin-top: 2px;

    }

    /* for button*/

    table tfoot tr{

    text-align: left;}


    3) Now, go the Form Designer. Go to CSS tab. Paste the following code into CSS codes section and save it:

    1520944425Screen Shot 2018-03-13 at 3.321520944436Screen Shot 2018-03-13 at 3.32

    .form-input-wide div {

    }

    #cid_2 div.form-buttons-wrapper {

    }

    .form-line {

    }

    #id_9 iframe {

        width : 100% !important;

    }


    you can also observe the steps by using the gif given below:

    1520944483css.gif

    The result should look like this:


    1520944136Screen Shot 2018-03-13 at 3.28

    you can take a look at the demo form and clone it if you need to:

    https://www.jotform.com/80713017423952

    you might need to take a look at these guides:

    Form Designer Tutorial: Let's create fantastic forms!

    How to Inject Custom CSS Codes

    How to Clone an Existing Form from a URL



  • Profile Image
    comoapproach
    Answered on March 15, 2018 at 11:35 PM

    thanks. it works. but i have since added another column. could you help me adjust it please.

    https://form.jotform.com/80658401014953

  • Profile Image
    tina
    Answered on March 16, 2018 at 02:11 AM

    Could you please follow the instructions given below again.

    1) Click on the Matrix Dynamique widget and click on Widget Settings.

    2) Go to Custom CSS tab. Paste here the code given below and update widget:

    table {width: 100%;}

    table tr{text-align:left;}

     

    table tr td,

    table tr th {

        width: 70px;

        padding:0 2px;

        text-align:center;

        word-wrap: break-word;

        font-size: 12px;

        display: inline-block;

        margin-top: 2px;

    }

     

    /* for button*/

    table tfoot tr{

        text-align: left;

    }1521180030Screen Shot 2018-03-16 at 8.51

    demo form:

    https://form.jotform.com/80741105223949