Повернуть пользовательский HTML в заголовке столбца handsontable

Я хотел бы повернуть html-ввод заголовка col в моем handsontable.

Я сделал следующее:

$myTable.handsontable({
data: myData,
colHeaders: colHeaderRenderer,
colWidths: [....],
columns: myColumns,
cells: cellsRenderer,
onBeforeChange: onBeforeChangeRenderer,
onChange: onChangeRenderer
});

при этом colHeaderRenderer

function colHeaderRenderer(col) {
    switch (col) {
    ...
    case 9:
      return '<span class="headerRotate">test1</span>';
    case 10:
      return '<span class="headerRotate">test2</span>';
    case 11:
      return 'test3';
  }
}

и определение headerRotate (согласно (вертикальный (повернутый) текст в таблице HTML ))

.headerRotate {
  -moz-transform: rotate(90.0deg);  /* FF3.5+ */
  -o-transform: rotate(90.0deg);  /* Opera 10.5 */
  -webkit-transform: rotate(90.0deg);  /* Saf3.1+, Chrome */
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);  /* IE6,IE7 */
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)"; /* IE8 */
}

Но текст (test1, test2) по-прежнему отображается в обычном режиме. Хотя есть намек на то, что что-то поворачивается на 90 градусов, когда я использую firebug, но я не вижу этого в html-доме.

введите здесь описание изображения


handsontable
person Manuel    schedule 11.02.2014    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Нашел решение пока писал. Проблема была в том, что я забыл добавить одно из следующих определений css:

display: block;
display: inline-block;
display: inline-flex;

После добавления определения к стилю текст повернулся правильно.

person Manuel    schedule 11.02.2014