:: Forum >>

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
Tuesday, February 15, 2005
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)
Tuesday, February 15, 2005
Thanks very much for your prompt reply, Alex.
Wednesday, February 16, 2005
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.
Friday, May 6, 2005
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
Friday, May 6, 2005
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.
Monday, May 9, 2005
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
Sunday, December 4, 2005

This topic is archived.

Back to support forum

Forum search