Ellipsis ... show in tab of Tab navigator

Question

Hi guys,
I'm using a TabNavigator component with static height, width and 3  static tabs. My problem is that the Tab navigator shows ellipsis in the  label of the first tab whereas it clearly looks that it does not lack  any space in tab width. how do i rectify it?
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"  layout="absolute" xmlns:local="*">
     <local:WLTabNavigator id="tn" x="83" y="60" width="210"  height="200" paddingBottom="0"
                      horizontalGap="1" tabHeight="18"  tabWidth="{tn.width/3}">
         <mx:Canvas label="Contacts" fontFamily="Arial"  fontSize="10">
         </mx:Canvas>
         <mx:Canvas label="SMS" fontFamily="Arial" fontSize="10">
         </mx:Canvas>
         <mx:Canvas label="Calls" fontFamily="Arial" fontSize="10">
         </mx:Canvas>
     </local:WLTabNavigator>
</mx:WindowedApplication>

Answer 1

I think this is working as designed. Your TabNavigator is 210px wide and with three tabs you're setting each tab to roughly 70px wide (give or take a pixel for gaps). If you don't set ANY tabWidth you can see that the first tab ("Contacts") wants to be about 78px, but you're only allowing 69-70px for the label, hence the truncation.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"  layout="horizontal">
    <mx:TabNavigator id="tn1" width="210"  height="100"
                     horizontalGap="1" tabHeight="18" tabWidth="69">
        <mx:Canvas label="Contacts" fontFamily="Arial"  fontSize="10">
            <mx:Label id="lbl1" creationComplete="lbl1.text = tn1.getTabAt(0).width.toString();" />
        </mx:Canvas>
        <mx:Canvas label="SMS" fontFamily="Arial" fontSize="10">
        </mx:Canvas>
        <mx:Canvas label="B" fontFamily="Arial" fontSize="10">
        </mx:Canvas>
    </mx:TabNavigator>
    <mx:TabNavigator id="tn2" width="210"  height="100"
                     horizontalGap="1" tabHeight="18">
        <mx:Canvas label="Contacts" fontFamily="Arial"  fontSize="10">
            <mx:Label id="lbl2" creationComplete="lbl2.text = tn2.getTabAt(0).width.toString();" />
        </mx:Canvas>
        <mx:Canvas label="SMS" fontFamily="Arial" fontSize="10">
        </mx:Canvas>
        <mx:Canvas label="B" fontFamily="Arial" fontSize="10">
        </mx:Canvas>
    </mx:TabNavigator>
</mx:Application>
I think a better approach is probably to set the TabNavigator container's internal TabBar to the same width of the TabNavigator and let the tabs resize themselves to fit. This may help get you started:
<mx:TabNavigator id="tn3" width="210"  height="100"
                 horizontalGap="1" tabHeight="18"
                 resize="event.currentTarget.mx_internal::getTabBar().width = event.currentTarget.width;">
    <mx:Canvas label="Contacts" fontFamily="Arial"  fontSize="10">
        <mx:Label id="lbl3" creationComplete="lbl3.text = tn3.getTabAt(0).width.toString();" />
    </mx:Canvas>
    <mx:Canvas label="SMS" fontFamily="Arial" fontSize="10">
    </mx:Canvas>
    <mx:Canvas label="B" fontFamily="Arial" fontSize="10">
    </mx:Canvas>
</mx:TabNavigator>
Or, since it looks like you are already subclassing TabNavigator, you could possibly move the logic into your subclass instead:
package {
    import mx.containers.TabNavigator;
    import mx.events.ResizeEvent;
    public class ResizerTabNavigator extends TabNavigator {
        public function ResizerTabNavigator() {
            super();
            addEventListener(ResizeEvent.RESIZE, resizeEventListener);
        protected function resizeEventListener(evt:ResizeEvent):void {
            tabBar.width = this.width;
Hope that helps,
Peter