Rotate custom HTML in handsontable column header

Question

I'd like to rotate the html input of a col header in my handsontable.

I've done the following:

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

whereby the 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';
  }
}

and the headerRotate definition (according to (Vertical (rotated) text in HTML table))

.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 */
}

But the text (test1, test2) is still shown the normal way. Altough there is a hint that something is rotated b y 90 degree when I use firebug, but I can't see it within the html dom.

Answer 1

Found the solution while I was typing. The problem was, that I forgot to add one of the following css definitions:

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

After adding a definition to the style, the text got rotated correctly.