TabNavigator cuts off labels

After applying a custom style to a TabNavigator, the label on the tab gets cut off after the first few characters until the mouse moves over the tab. From that point on the tab displays correctly.

For example, "Inventory" would read "Inv..." until the mouse is waved over the tab, at which point it switches back to "Inventory".

I'm guessing Flex is getting confused about the width of the tab label-- there's room for the full label, but Flex doesn't realize this until a mouseover. How do I tell Flex to display the full label?

Are you changing your label(s) via code or are they hard set?

And are you using Degrafa to change the look of the tabNavigator?

The labels are fixed in the MXML and no, I'm not using Degrafa.

I am using an embedded font.

Okay, now I'm confused. I just created a quick tabNavigator example and it works just fine.

My structure was:

Code:

---

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Panel title="Just a test" id="test" width="500" height="450">
<mx:TabNavigator id="viewstack2" selectedIndex="0" historyManagementEnabled="true" width="100%" height="100%">
<mx:Canvas label="I choose you, Pikachu" id="Tab01"/>
<mx:Canvas label="I choose you, Charmander" id="Tab02"/>
<mx:Canvas label="I choose you, David Bowie" id="Tab03"/>
</mx:TabNavigator>
</mx:Panel>
</mx:Application>

---

And it's showing up with my long titles. Without seeing your code, I can only assume that you're not using labels.

The TabNavigator is in a custom TitleWindow pop-up using embedded styles and fonts, so I can't easily post all necessary files to replicate the problem.

At this point I'm 99% percent sure it's not a problem with the TabNavigator MXML, but with some interaction of some style with the tabs. Strangely, if I comment out the call to PopUpManager.centerPopUp(this), which is called on creationComplete the problem goes away. It also goes away if I remove all custom styles.

But here's the TabNavigator code:

PHP Code:

---

<mx:TabNavigator id='inventoryTabNavigator' width="100%" height="100%" styleName="inventoryTabNavigator">
                <mx:VBox label='Installed'>
                    <mx:DataGrid id="installedDataGrid" dataProvider="{testData}" styleName="dataGrid" width="100%" height="100%">
                    <mx:columns>
                        <mx:DataGridColumn headerText="Item" dataField="name"/>
                        <mx:DataGridColumn headerText="Status" dataField="status"/>
                    </mx:columns>
                    </mx:DataGrid>
                </mx:VBox>
                <mx:VBox label='Inventory'>
                    <mx:DataGrid id="cargoDataGrid" dataProvider="{testData}" styleName="dataGrid" width="100%" height="100%">
                    <mx:columns>
                        <mx:DataGridColumn headerText="Item" dataField="name"/>
                        <mx:DataGridColumn headerText="Status" dataField="status"/>
                    </mx:columns>
                    </mx:DataGrid>
                </mx:VBox>
                </mx:TabNavigator> 


---

ah, it's in a popup? I've been struggling with some titleWindow issues my darn self as far as some styles go - and some other issues as well.

you might benefit from switching to mx.managers.IPopUpManager method instead.

I had the same problem until I tried using truncateToFit="false"

By default, it's set to true. If you put it inside your

Code:

---

<mx:Whatever label="Hey There" truncateToFit="false"/>

---

it should work.

After posting this I realized that while it does work, it also throws an error
"Cannot resolve attribute ;truncateToFit' for component type mx.containers.Canvas."

Which I find to be odd... since it does actually stop things from being truncated.

It might be too late to answer to the problem but i had faced the same issue in the popup, adding the CreationPolicy=all to the tab navigator got solved.