I've seen discussions about this topic but none of them had the solution that I need...
I create a tab navigator in the MXML portion of my component and set its width to 100%.
<mx:TabNavigator id="visibleOverlayTabs" width="100%" height="25%" paddingBottom="5" paddingLeft="5" paddingRight="5" paddingTop="5">
<!-- Content Generated Dynamically -->
In the script portion of the component I have a loop that creates multiple vbox and data grid components. One data grid gets added to each vbox and then all the vbox components get added to the tab navigator. This loop is in a function that gets called the first time the show event is triggered on the main components that the tab navigator is inside of.
When the show event is triggered the first time, the width of the tab navigator is 12 as seen from a trace call. The vbox and data grid widths are 0. When I do not specify a width for the vbox and data grid, the data grid does appear with its columns visible but it does not fill the width of the tab navigator (I want the data grid width to be 100%). If I try to set the width for either the vbox or data grid to the tab navigator width, it gets set to 12 and appears with that width... i.e. all squished up.
I tried calling the validateNow function on the tab navigator prior to adding components to it and also after and neither worked. The width is always 12 when the show event is triggered the first time. All additional times the show event is called the width is set to the proper size that it should be.
So how can I get the size of the tab navigator to set correctly before I add the components so that I can set the width of the vbox and data grid to the width of the tab navigator?