Rotate the header

Suite and Optimus Suite 5
#1

Hello all,

I’ve a got a grid with a lot of columns, and I would like making my grid lisible for netbook users. The solution proposed is to rotate titles in header. For this solution, i found css-properties :

.class { -moz-transform: rotate(Xdeg); -webkit-transform: rotate(Xdeg); transform: rotate(Xdeg); }

How could I modify the css file of my grid ?
Is there another easier solution ?

#2

I suspect that it will be

.gridbox .hdr td{ -moz-transform: rotate(90); -webkit-transform: rotate(90); transform: rotate(90); }

The only other solution will be to convert text to images, and use images in header instead of text.

#3

It appears that CSS3 doesn’t works.

I use this syntax :

grid.setStyle("font-size:0.55em;text-align:center;","","","");

This works, but when I use “-moz-transform” is doesn’t works…

#4

You can define it as static grid id specific css rule

#mygridid .hdr td {
-moz-transform: rotate(Xdeg);
-webkit-transform: rotate(Xdeg);
transform: rotate(Xdeg);
}

where mygridid - id of grid’s container

Also, isn’t -moz-transform supported only by latest FF beta?

#5

I used
.gridbox .hdr td {
-moz-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
}

It looks like it rotated. The problem is that the header height is too small, it chopped off part of the rotated text. How to make the header height larger?