Formatting a matrix

  • Profile Image
    charlottefoundation
    Asked on April 11, 2012 at 09:54 PM

    I'm wondering if there is a way to format the cells in the left hand column of my matrix so that they are longer? I'd also like there to be borders around the areas where you enter text, so that the matrix doesn't appear as just one a big blotch of blue. Is there a way to do this?

    I'd like the cells in the "potential donor" column to be longer.

    My form: http://form.jotform.us/form/21015657129147?

  • Profile Image
    mliz
    Answered on April 11, 2012 at 11:35 PM

    You can use custom inject css to format the matrix field to do this,

    1.  Go to Setup & Embed tab
    2.  Click Preferences Form button
    3.  Choose Form Styles tab
    4.  Copy and paste the css code in the Inject Custom CSS textarea

     

    You can use the following code below and change the values for the width, border style and color according to your needs.

    /* 1st column */
    .form-matrix-row-headers +.form-matrix-values .form-textbox {
    width: 100px;
    border-style: solid;
    border-width: 1px;
    border-color: black;
    }

    /* 2nd Column */
    .form-matrix-row-headers +.form-matrix-values +.form-matrix-values .form-textbox{
    width: 100px;
    border-style: solid;
    border-width: 1px;
    border-color: black;
    }

    /* 3rd Column */
    .form-matrix-row-headers +.form-matrix-values +.form-matrix-values +.form-matrix-values .form-textbox{
    width: 100px;
    border-style: solid;
    border-width: 1px;
    border-color: black;
    }

    /* 4th Column */
    .form-matrix-row-headers +.form-matrix-values +.form-matrix-values +.form-matrix-values +.form-matrix-values .form-textbox{
    width: 100px;
    border-style: solid;
    border-width: 1px;
    border-color: black;
    }

    Hope this helps, let us know if you need anything else.

  • Profile Image
    StudioBe
    Answered on September 22, 2015 at 02:22 PM

    Can someone please explain how you would use the above code for a 6 columns? I would assume you could just copy the code from one of the current columns, add it to the bottom, and change the numbers to "5th" and "6th". But it doesn't work. It only changes column 1-4. Thanks!
  • Profile Image
    Ben
    Answered on September 22, 2015 at 03:19 PM

    Please note that this was a thread from 2012. In future, please do open a new thread instead, with a link to the thread as a reference.

    I have at this time moved your question to a new thread here: http://www.jotform.com/answers/668150 where we will be answering your question shortly.