View Full Version : Vertical Text into Column Header Grid

24 Mar 2011, 2:06 PM
Hi, I ask help to the community.

I would like to set the vertical property to the text of the column header in a grid.

I created this class into css file:

.css-vertical-text {
filter : progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
-webkit-transform : rotate(90deg);
-moz-transform : rotate(90deg);
-o-transform : rotate(90deg);

then in the render event of the grid...

grid.addListener(Events.Render, new Listener<BaseEvent>() {
public void handleEvent(BaseEvent be) {
Grid grid = (Grid) be.getSource();
GridView view = grid.getView();
for (int i=0;i<30;i++) {

I this case the text is corrected shown vertical, but the header is too small.

Now, if I add this code into the "listener" to increase the height of columnHeader:


the header is correct, 100px, but all the column label are shifted to right of 100px, because their height is 100px. If, with FireBug, I remove this property the label goes in the correct position.

I hope to have explained correctly my problem.


7 Apr 2011, 6:24 AM
I experience the same behavior.

is there any solution ?

thx !

7 Apr 2011, 7:12 AM
Sorry, but i didn't find any solution.


8 May 2011, 8:16 AM
I was also experimenting with different approaches, but i haven't found anything that works across both IE and FireFox :((

Has anyone found the solution?
If not, maybe GXT team can suggest something?