What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    To create a multiple matrix table with column sizes different for each one ?

    Asked by swapna_summit on June 11, 2014 at 03:54 AM

    i use the method usind script by addind the eg:#cid_17.form-matrix-values....

    but it is cahnging the whole table of my form,

    can u suggest how to do this to create this?

     

    i also have an issue with adding images in the row of the matrix,and let me know how to do that with the attached table and how to create a table with smaller width like the image,

    Screenshot
    table different create multiple matrix
  • Profile Image
    JotForm Support

    Answered by EltonCris on June 11, 2014 at 06:31 AM

    Hi,

    Here's the CSS codes for that.

    .form-matrix-values {padding-left: 3px;padding-right: 3px;}

    /* 1st Column */

    .form-matrix-row-headers +

    .form-matrix-values .form-textbox {width: 120px;}

    /* 2nd Column */

    .form-matrix-row-headers +

    .form-matrix-values +

    .form-matrix-values .form-textbox {width: 130px;}

    /* 3rd Column */

    .form-matrix-row-headers +

    .form-matrix-values +

    .form-matrix-values +

    .form-matrix-values .form-textbox{width: 140px;}

    /* 4th Column */

    .form-matrix-row-headers +

    .form-matrix-values +

    .form-matrix-values +

    .form-matrix-values +

    .form-matrix-values .form-textbox {width: 150px;}

    Just change the width on each column to your preference. If you want to go beyond 4 columns, just add .form-matrix-values+ class under it.

    --

    For the image, just insert image html code on the rows property. Example:

    <img src="//yoursite.com/images/nba2014.png">

    Let us know if you need further assistance. Regards!