How do I change the widths of the columns in a Matrix?

  • Profile Image
    carnegies
    Asked on December 11, 2016 at 11:17 AM
    Also, how do I change the widths of the columns in a Matrix?
  • Profile Image
    Jan
    Answered on December 11, 2016 at 01:08 PM

    You can increase the column by using custom CSS. Here's the CSS code:

    /* 1st Column */
    .form-matrix-row-headers +
    .form-matrix-values .form-textbox {
    width: 100px !important;
    }

    /* 2nd Column */
    .form-matrix-row-headers +
    .form-matrix-values +
    .form-matrix-values .form-textbox {
    width: 100px !important;
    }

    /* 3rd Column */
    .form-matrix-row-headers +
    .form-matrix-values +
    .form-matrix-values +
    .form-matrix-values .form-textbox {
    width: 100px !important;
    }

    /* 4th Column */
    .form-matrix-row-headers +
    .form-matrix-values +
    .form-matrix-values +
    .form-matrix-values +
    .form-matrix-values .form-textbox {
    width: 100px !important;
    }

    /* 5th Column */
    .form-matrix-row-headers +
    .form-matrix-values +
    .form-matrix-values +
    .form-matrix-values +
    .form-matrix-values +
    .form-matrix-values .form-textbox {
    width: 100px !important;
    }

    /* 6th Column */
    .form-matrix-row-headers +
    .form-matrix-values +
    .form-matrix-values +
    .form-matrix-values +
    .form-matrix-values +
    .form-matrix-values +
    .form-matrix-values .form-textbox {
    width: 100px !important;
    }

    /* 7th Column */
    .form-matrix-row-headers +
    .form-matrix-values +
    .form-matrix-values +
    .form-matrix-values +
    .form-matrix-values +
    .form-matrix-values +
    .form-matrix-values +
    .form-matrix-values .form-textbox {
    width: 100px !important;
    }

    /* 8th Column */
    .form-matrix-row-headers +
    .form-matrix-values +
    .form-matrix-values +
    .form-matrix-values +
    .form-matrix-values +
    .form-matrix-values +
    .form-matrix-values +
    .form-matrix-values +
    .form-matrix-values .form-textbox {
    width: 100px !important;
    }

    Here's a guide on how to inject custom CSS. Please take note that you can change the 100px width if you wanted to. 

    Hope that helps. If you have any questions, let us know. Thank you.