SlickGrid-rotated column headers

6
votes

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;
}
2
slickgridtableheader

2 Answers

1
votes

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.

0
votes

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.