Vertically aligning tabs within a TabBar control in Flex

In a previous example, “Horizontally aligning tabs within a TabBar control in Flex”, we saw how you could horizontally align tabs in a TabBar control by setting the horizontalAlign style.

The following example shows how you can align tabs vertically within a Flex TabBar control by setting the verticalAlign style.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?>
<!-- -->
<mx:Application xmlns:mx=""

        TabBar {
            tabStyleName: myCustomTabStyleName;
            selectedTabTextStyleName: myCustomSelectedTabTextStyleName;

        .myCustomTabStyleName {
            fillColors: haloBlue, haloGreen;
            fillAlphas: 1.0, 1.0;

        .myCustomSelectedTabTextStyleName {
            color: white;

    <mx:Array id="arr">
        <mx:Object label="Button" />
        <mx:Object label="ButtonBar" />
        <mx:Object label="ColorPicker" />
        <mx:Object label="ComboBox" />

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="verticalAlign:">
                <mx:ComboBox id="comboBox">
                            <mx:Object label="top" />
                            <mx:Object label="middle" />
                            <mx:Object label="bottom" />

    <mx:Box backgroundColor="black">
        <mx:TabBar id="tabBar"
                direction="vertical" />


2 thoughts on “Vertically aligning tabs within a TabBar control in Flex

  1. Hi, this is venkat, Actually i’m new for flex and now i’m working for flex application. i have one requirement says that ” in flex apllication if i’ve more tabs and in that tabs i’m using right side last tab and i closed that browser. After that when i relaunch the application when i accessed previously tab only loading but i’m unable to see that tab. It is showing from first tab, then i need to scroll it i want to see that tab.” Can you tell how can i see with out scrolling active tab in this case?

Comments are closed.