Vertical Title orientation for Side Tabs

Technical Q&A
1

I’m trying to have a LEFT sided tab navigation. Is it possible to have the Title orientation to Vertical instead of Horizontal.
ShowCase sample just shows an image instead :slight_smile:
Also some old threads say it’s not possible. Can somebody let me know if it’s possible without images etc.

Thanks.

2

CSS techniques can be used to do this on some browsers, otherwise, use the hack of letter<br>letter<br> etc.

3

Hi Isomorphic,

is using images or roll own css or the “<br>letter<br>”-hack still the way to go?
Which one do you suggest?

Best regards
Blama

4

This is still the way to go (not something we have built in as a property, etc).

CSS is probably the way to go unless you are needing to support legacy systems with older browsers. Of course we’d recommend testing the result on your target browsers and making sure things look how you want them to!

5

Hello,

for anyone interested, I solved it this way:

td.tabButtonLeft div,
td.tabButtonLeftOver div,
td.tabButtonLeftSelected div,
td.tabButtonLeftSelectedOver div,
td.tabButtonLeftDown div,
td.tabButtonLeftSelectedDown div,
td.tabButtonLeftSelectedDisabled div,
td.tabButtonLeftDisabled div {
    font-size: 16px;
    transform: rotate(270deg);
    font-family: MYFONT;
    font-weight: bold;
    padding: 0px 0px 49px 0px;
    height: 22px;
    width: 80px;
}

Depending on your settings for font and font size you’ll probably have to tweak height and padding. These are needed as otherwise strings of a different length will be positioned differently.

This works in IE11/GC46/FF26 and according to Can I use it will work in most older browsers as well. I’ll have to see if anyone requests support for IE8/IE9.

Best regards
Blama