2012-03-29 10 views
5

Wie kann ich meine Spaltenüberschriften um 90 Grad drehen? Ich habe es versucht, aber ich konnte es nicht zur Arbeit bringen.SlickGrid-rotierte Spaltenüberschriften

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

Antwort

0

Es funktioniert, wenn Sie den <span>-Tag mit dem Header-Namen mit einem <div> Tag in slick.grid.js ersetzen. Irgendwie funktioniert die Umwandlung nur für div Tags.

+0

Es ist wahrscheinlich aufgrund der CSS 'Anzeige' Regel. Wenn diese Bereiche auf "display: block" gesetzt werden, sollte die Rotation funktionieren. – idbehold

0

Für diejenigen noch nicht gefunden hat, eine gute Lösung:

/* 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(''); 
} 

Die obige CSS dreht den Header-Namen, und bewegt ihn nach unten 90px, es dem Header 100px in der Höhe sein Größen. Sie können die 90px und 100px auf was auch immer Sie wollen ändern.

Verwandte Themen