Is it possible to have the matrix top headers shown vertically, instead of horizontaly?

  • Profile Image
    Obronie
    Asked on August 14, 2015 at 06:49 PM
    Thanks for the code, it already look much better! I want to increase the size of the First Column and then the others equal. I do not suppose it would be possible to use vertical text for the column headers?
  • Profile Image
    Ben
    Answered on August 14, 2015 at 07:27 PM

    As mentioned on the other thread, it is possible to align text in the vertical line - there are actually many great things that you can do with the CSS, but more to it if needed :)

    Now, in regards to alignment, I had removed all the code that was mentioned on the previous thread in order to have it all work properly, so this is the only code that you need:

    th.form-matrix-row-headers {
        min-width: 360px;
    }
    .form-matrix-table tr td {
        min-width: 20px;
    }
    th.form-matrix-column-headers {
        display: inline-block;
        height: 20px;
        left: 168px;
        margin-bottom: 49px;
        margin-left: -103px;
        margin-right: -60px;
        min-width: 120px;
        position: relative;
        transform: rotate(-90deg);
    }

    And this is how it will look:

    In regards to the CSS above, just add it to your form by following these steps:  but do remove all the code that is currently after the /* | *//*__INSPECT_SEPERATOR__*/ so that after you copy the codes I given above, it looks like this:

    Do of course let us know how it goes and feel free to simply clone my clone of your form to your account instead.

    You can do that by following these steps: How to Clone an Existing Form from a URL

    and this is the link to my clone: http://form.jotformpro.com/form/52257202886963

  • Profile Image
    Obronie
    Answered on August 15, 2015 at 03:27 AM

    Thanks Ben! Done it. I just noticed that the alignment of the scale is not 100% correct. It is on your clone form - screencapture above looks good - and mine: http://form.jotformpro.com/form/52242256430951?

     

    Any suggestion?

  • Profile Image
    EltonCris
    Answered on August 15, 2015 at 12:23 PM

    It looks fine on Firefox but it seems a bit off on Chrome. This is how it displays on Chrome which I think the issue you are referring.

    Please add this CSS codes to your form to align it properly on Chrome just like on my colleague's screenshot.

    .form-matrix-column-headers:not(*:root) {

        left: 167px;

        min-width: 124px;

        top: -2px;

    }

    Note that this is a browser specific CSS which only works on Chrome so I would suggest injecting it to your form by following this guide: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes-to-your-Form. Add it on the most bottom part.

    If you see any problems, please let us know. Thanks!