rotate heading text

Targets Web
1

Hello all;

I need to create a grid where heading text is rotated 90 degrees counter clockwise ( text is vertical and reads bottom to top). I did not see a property of the weblistbox, nor a style option that would allow me to do this. Does anyone have an idea how this could be achieved?

Thanks in advance. LD

2

In HTMLHeader :

[code]
.rotate {

/* Safari */
-webkit-transform: rotate(90deg);

/* Firefox */
-moz-transform: rotate(90deg);

/* IE */
-ms-transform: rotate(90deg);

/* Opera */
-o-transform: rotate(90deg);

/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);

}
[/code]

Add a new WebStyle to the project and call it Rotate.

When this style is affected to a control, it rotates around its center.

Applied to a WebListBox, it rotates the entire WebListBox.

For Internet Explorer’s BasicImage filter can accept one of four values: 0, 1, 2, or 3 which will rotate the element 0, 90, 180 or 270 degrees respectively.

3

Thanks Michel. I will try to assign this to the heading only and see what it does to the overall listbox.

4

You could also use in fact two WebListBoxes : one that contains the rows and has no heading, and one 22 pix high containing only the heading, that you rotate. The tricky part will be to position them next to each other, since rotation does not show in the IDE.

5

Well, that is my next step. Assigning the rotate style to the header did not provide the expected (hoped for) results. (tested with Chrome, FF, Edge and IE)

6

Using Rotate for the Header style won’t work IMO because technically WebListBox is a table inside a Div. You can only rotate entire controls, not part of them.