Why do I have a gap within my TabNavigator?

Question

Apologies for the rookie Q - trying to learn Flex/Actionscript and just having some basic layout issues. (Using FlashBuilder 4, with Flex 4.5 HERO SDK)

I have a TitleWindow, and have embedded a mx:TabNavigator within it.
I have then placed a list within the first tab and set its width/height to 100%

However, there appears to be a gap between the top of the list, and the bottom of the tab menus.

Why is this happening and what is the best way to ensure the top of the list aligns up flush with the top of the VBox?

enter image description here

<s:TitleWindow title="Dekho Resource Center"
                   id="titleWindow"
                   close="cancel();"
                   width="375"
                   height="500"
                   backgroundAlpha="0" 
                   cornerRadius="5">

        <mx:TabNavigator borderStyle="solid" left="0" top="0" width="100%" height="100%" backgroundAlpha="0" >
            <mx:VBox label="Blog Posts" 
                     width="100%" 
                     height="100%">

                <s:List labelField="title" id="theList" width="100%" height="100%" 
                        contentBackgroundAlpha="0.7" rollOverColor="#F58B57" selectionColor="#FF7227"
                        doubleClickEnabled="true" doubleClick="theList_doubleClickHandler(event)">
                    <mx:AsyncListView list="{getDataResult.lastResult}"/>
                </s:List>
            </mx:VBox>

            <mx:VBox label="Search" 
                     width="100%" 
                     height="100%">

            </mx:VBox> 
        </mx:TabNavigator>

Jason Sturges Jason Sturges · Accepted Answer · 2011-10-23T02:00:11

Remove the padding from the TabNavigator:

<mx:TabNavigator paddingTop="0"
                 paddingLeft="0"
                 paddingRight="0"
                 paddingBottom="0">

Why do I have a gap within my TabNavigator?

1 Answers