Customize Matrix Textboxes Width

  • Profile Image
    swapna_summit
    Asked on July 01, 2014 at 03:52 AM

    Hi

    We need to format a specific matrix tables textboxes width. We have tried the following options but they have not resulted in any changes.

    #cid_21 #form-matrix-column_1  .form-textbox {width:200px;}

    #cid_21  .form-matrix-row-headers +.form-matrix-values +.form-matrix-values .form-textbox {

    width:200px;

    }

     

    #cid_21 .form-matrix-row-headers +.form-matrix-values +.form-matrix-values .form-textbox

    {width: 200px;}

     

    #cid_21 #form-matrix-column_1  .form-textbox {

    width:200px;}

     

    Please see below for an example of the table.

     

    Please advise on what we need to do.

     

    Thanks so much.

     

    Kind Regards

    --------------------------------------------------------------------------------------------

    http://pastiebin.com/53b274f135c3d

  • Profile Image
    Welvin
    Answered on July 01, 2014 at 05:21 AM

    What is the form URL? You have to target the main ID, in that case, you should use the following:

    For First Column:

    #id_21 .form-matrix-row-headers + .form-matrix-values .form-textbox {

    width: 200px !important;

    }

     

    For the Second Column:

    #id_21 .form-matrix-row-headers + .form-matrix-values + .form-matrix-values .form-textbox {

    width: 200px !important;

    }

     

    If you need to apply it to the 3rd, 4th and so on, just add three (3) .form-matrix-values to adjust the 3rd column.

     

    Let us know if you need any further assistance.

    Thanks

  • Profile Image
    Welvin
    Answered on July 01, 2014 at 05:23 AM

    Here's an example form with custom widths for each column for a specific matrix table: http://www.jotformpro.com/form/41812452898968

    Thanks

  • Profile Image
    swapna_summit
    Answered on July 02, 2014 at 04:04 AM

    Hi thanks for the reply

    I injected the Code and it works for the 2nd 3rd and the 4rth column and it does not working while i put for the first column like this:

     

    #id_21 .form-matrix-row-headers + .form-matrix-values + .form-textbox {

    width: 20px !important;

    }

     

     

    form url : http://www.jotform.com//?formID=41773621486561

  • Profile Image
    EltonCris
    Answered on July 02, 2014 at 07:51 AM

    @swapna_summit

    There's a plus sign (+) before the .form-textbox class on your code. Removing it should fix the problem.

    Here's the corrected code:

    #id_21 .form-matrix-row-headers + .form-matrix-values .form-textbox {

    width: 20px !important;

    }

    Regards!

  • Profile Image
    swapna_summit
    Answered on July 02, 2014 at 07:56 AM

    Hi could you please write the coding that should affect all the matrix cell width to 23px for a numeric text box in matrix

  • Profile Image
    EltonCris
    Answered on July 02, 2014 at 09:13 AM

    Here's the code for that.

    .form-matrix-values .form-number-input {

    width: 23px !important;

    }

    Cheers!

  • Profile Image
    rebekah405
    Answered on April 08, 2015 at 02:38 PM

    I also need to format a specific matrix tables textboxes' width but I can't figure out what css code I should use. I tried following the steps above but I'm not sure how to locate the main id and how to customize.

    Here is the form link: http://form.jotform.us/form/50963867216161

    and here is a shot of what the matrix curently looks like, I want the fillable text box width much wider. Can we make it show the entire data that is entered (it can get lengthy)?

  • Profile Image
    david
    Answered on April 08, 2015 at 04:44 PM

    Hi,

    I have moved your request to a thread of its own so that we may address it properly.  We will follow up with our response here:

    http://www.jotform.com/answers/548755