SlickGrid-rotated column headers

Question

How can I rotate my column headers 90 degrees? I've tried this, but haven't been able to get it to work.

.slick-column-name {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    display: block;
    vertical-align: bottom;
}

Facture

Answer 1

For those has not yet found a good solution:

 /* Rotate the header*/
.slick-column-name {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);

    -webkit-transform-origin: 0px 0px;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%;

    margin-top: 90px !important;
    font-size: 0.8em;

    display: block;


}
/* set the header height*/
.slick-header-columns, .slick-header-column {
    height: 100px !important;
    background-image: url('');
}

The above CSS rotates the header name, and moves it down 90px, it sizes the header to be of 100px in height. You can change the 90px and 100px to whatever you want.

Syllabus

This works well, except I set all the transform-origin: 0 0; – Tanishatanitansy

Answer 2

It works if you replace the <span> tag with the header name with a <div> tag in slick.grid.js. Somehow transformation works only for div tags.

Tychon

It's likely due to the CSS display rule. Setting those spans to display: block should get the rotation working. – Mesentery