2 Replies Latest reply on Aug 7, 2006 7:04 AM by kuene

    Vertical Tabbar?

      I am in need of vertical tabs (picture a regular tabbar rotated -90 degrees) but there doesn't seam to be an obvious way to do it.

      <mx:Tabbar direction="vertical"/> merely makes the tabs stack on top of each other, each tab still in the horizontal position.

      <mx:Tabbar rotation="-90"/> rotates the component correctly but the tabs layout unexpectedly, the text dissapears, and the component becomes unresponsive.

      Any ideas?
        • 1. Re: Vertical Tabbar?
          leotemp Level 1
          Ive had alot of wacky results with rotation too, i think you have to specify the axis your going to rotate it on otherwise it does it from one of the corners and depending how large the object is it can move off screen even, im not if thats whats happening but sounds like it, see if you can specify the axis in the center of your object also you can create your tabs graphically using canvases and linkbuttons or labels for your text, then use a repeater, make sure to use rounded canvases with a border and then tuck the side you want to be flat behind something like another canvas or the edge of your screen, make sure whatever is hiding that edge has a its scrollbars set to "off"

          <?xml version="1.0" encoding="utf-8"?>
          <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute" horizontalScrollPolicy="off" verticalScrollPolicy="off">

          <mx:Repeater id="rep01" dataProvider="{}">
          <mx:Canvas width="20" height="80" left="-2" top="5" borderStyle="solid" borderColor="#ffffff" cornerRadius="4" borderThickness="1" backgroundColor="#c0c0c0">

          • 2. Re: Vertical Tabbar?
            don't have a solution for the tabs themselves, but concerning your disappearing text issue, i'm pretty sure you'll have to embed that font (can do it via css) and include the ttf in the assests. i had to do this when i rotated text in a chart axis label, see below.

            @font-face {
            fontFamily: labelFont;
            fontFamily: labelFont;