2012-03-29 13 views
5

मैं अपने कॉलम हेडर 90 डिग्री कैसे घुमा सकता हूं? मैंने यह कोशिश की है, लेकिन इसे काम करने में सक्षम नहीं है।SlickGrid-rotated कॉलम हेडर

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

उत्तर

0

यह काम करता है अगर आप slick.grid.js में एक <div> टैग के साथ शीर्ष लेख नाम के साथ <span> टैग को बदलने। किसी भी तरह से परिवर्तन केवल div टैग के लिए काम करता है।

+0

यह सीएसएस 'प्रदर्शन' नियम के कारण होने की संभावना है। उन स्पैन को 'डिस्प्ले: ब्लॉक' पर सेट करना रोटेशन काम करना चाहिए। – idbehold

0

उन लोगों के लिए अभी तक एक अच्छा समाधान नहीं मिला है:

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

ऊपर सीएसएस हैडर नाम घूमता है, और गुणित 90px यह नीचे ले जाता है, यह हैडर ऊंचाई में 100px का होना आकार। आप जो कुछ भी चाहते हैं उसे 90px और 100px बदल सकते हैं।