Заголовки столбцов с поворотом SlickGrid - PullRequest
Новая
       17

Заголовки столбцов с поворотом SlickGrid

5 голосов
/ 29 марта 2012

Как я могу повернуть заголовки моих столбцов на 90 градусов? Я пробовал это, но не смог заставить его работать. 

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

Ответы [ 2 ]

0 голосов
/ 03 марта 2014

Для тех, кто еще не нашел хорошего решения: 

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

Приведенный выше CSS поворачивает имя заголовка и перемещает его на 90px, размер заголовка должен быть 100px в высоту. Вы можете изменить 90px и 100px на любое другое.

0 голосов
/ 30 апреля 2013

Это работает, если вы замените тег <span> именем заголовка на тег <div> в slick.grid.js. Каким-то образом преобразование работает только для тегов div.

...