writing-mode CSS style in headers

My first day using the active widget grid - mightily impressed so far!

One question I have - is it possible to have vertical text in the column headings? In my old HTML table I set the 'writing-mode' for the cell to be 'tb-rl'. I have tried setting the style in a template and using that but I get no text at all then:

var objHdrTemplate = new Active.Templates.Header;
objHdrTemplate.setStyle("writing-mode", "tb-rl");
objGrid.setTemplate("top/item", objHdrTemplate);

Is this possible? If so, does anyone know what I'm doing wrong?

Thanks for any hints,
Al Henderson
February 15,
The header template contains one more nested div (which has a css class active-box-item), so correct css will be (in stylesheet)

.active-scroll-top .active-box-item {writing-mode: tb-rl;}
.active-scroll-top .active-box-image {height: 1px; width: 100%}

Alex (ActiveWidgets)
February 15,
Thanks very much for your prompt reply, Alex.
February 16,
I'm using a css class that looks like the following:
TD.colhdgv2 {
font-family: Verdana, Tahoma, 'Trebuchet MS', Arial, Helvetica, sans-serif;
font-weight: bold;
color: #FFFFFF;
background-color: #708090;
padding: 1px 1px 1px 1px;
writing-mode: tb-rl;
filter: flipv fliph;

but when I look at in the browser firefox, it doesn't work but works in IE. Any ideas.
May 6,
To the best of my knowledge, writing-mode is an IE only attribute. It does not work with any other browser that I know of. If your site is only going to accessed by users that you know will be using IE, then it is safe to use it. If it is a public web site then I suggest that you do not use it.
I know of no other easy way of doing vertical text that works in all browsers.
Jim Hunter
May 6,
Thanks Jim, for getting back to me so promptly. But you said there is no easy way to do but is there a way to accomplish this. I'm open to suggestions.
May 9,
Writing-mode is a CSS3 level item so not all browsers have caught up
To solve this for non-IE

Check for browser type:
If IE use "style" as above with tl-rb

Otherwise create an image of vertical text and use "img"
(Firefox is only CSS2 compliant not CSS3)

Good luck
Malcolm Greenaway
December 4,

This topic is archived.

See also:

Back to support forum