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

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

    Asked by Obronie 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?
    CSS matrix align vertical stack
  • Profile Image

    Answered by Ben 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

    Answered by Obronie 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
    JotForm Support

    Answered by EltonCris 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!