Changing the padding between the tabs and content in a Flex TabNavigator control

The following example shows how you can adjust the amount of padding that appears between the tabs and the content of a TabNavigator control in Flex by setting the paddingTop style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/12/14/changing-the-padding-between-the-tabs-and-content-in-a-flex-tabnavigator-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="paddingTop:">
                <mx:HSlider id="slider"
                        minimum="0"
                        maximum="20"
                        value="10"
                        liveDragging="true"
                        snapInterval="1"
                        tickInterval="1" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:TabNavigator width="360"
            height="120"
            paddingTop="{slider.value}"
            backgroundColor="#666666">
        <mx:VBox id="vb1" label="Red" backgroundColor="red">
            <mx:Label text="width:{vb1.width}, height:{vb1.height}" />
        </mx:VBox>
        <mx:VBox id="vb2" label="Orange" backgroundColor="haloOrange">
            <mx:Label text="width:{vb2.width}, height:{vb2.height}" />
        </mx:VBox>
        <mx:VBox id="vb3" label="Yellow" backgroundColor="yellow">
            <mx:Label text="width:{vb3.width}, height:{vb3.height}" />
        </mx:VBox>
        <mx:VBox id="vb4" label="Green" backgroundColor="haloGreen">
            <mx:Label text="width:{vb4.width}, height:{vb4.height}" />
        </mx:VBox>
        <mx:VBox id="vb5" label="Blue" backgroundColor="haloBlue">
            <mx:Label text="width:{vb5.width}, height:{vb5.height}" />
        </mx:VBox>
    </mx:TabNavigator>

</mx:Application>

View source is enabled in the following example.

You can also set the paddingTop style in an external CSS file, or in an <mx:Script /> block using the following snippet:

<mx:Style>
    TabNavigator {
        paddingTop: 0;
    }
</mx:Style>

Or, you can set the style in a <mx:Script /> block using ActionScript, using any of the following snippets:

<mx:Script>
    <![CDATA[
        private function init():void {
            /* Assuming you set an "id" of tabNavigator on the
               TabNavigator control. */
            tabNavigator.setStyle("paddingTop", 0);
        }
    ]]>
</mx:Script>

<mx:Script>
    <![CDATA[
        import mx.styles.StyleManager;

        private function init():void {
            var styleObj:CSSStyleDeclaration;
            styleObj = StyleManager.getStyleDeclaration("TabNavigator");
            styleObj.setStyle("paddingTop", 0);
        }
    ]]>
</mx:Script>

StyleManager.getStyleDeclaration("TabNavigator").setStyle("paddingTop", 30);

Tagged as: paddingTop