how do I find the height of the children in a TabNavigator, without the height of the Tabs?

Question

I'm having sizing issues with a TabNavigator. The direct children of the TabNavigator are Canvases, and within these I am adding Images. I'm trying to resize the images to fit within the Canvas without scrollbars. The Canvas height is set to 100% of the parent, which is the TabNav. Then I'm setting the image.height = parent.height * .9

The result is that Flex is generating scrollbars because the images are too high. It appears that the root cause is that the height property of the TabNavigator is the height of the entire component, including the height of the tabs. I'm assuming therefore it also contains that little strip of space between the tabs and the children of the TabNavigator.

This makes sense, but is there a property that returns only the height of the children?

I'm aware of the scrollbar policy properties and I've experimented with those. I know I can also try a different multiplier for the image size to get it to fit. It just seems like there should be a property to get the size of the space for the children.

Answer 1

Looking through the source, there's a "contentHeight" property that seems to be the thing you want.

The method ends with this line:

return unscaledHeight - tabBarHeight - vmTop - vmBottom;

which seems to be exactly what you're looking for. Unfortunately this property is protected, as is the case with many things we developers want out of the Flex library. :)

Your quickest solution using this would be to sub-class TabNavigator and expose this property publically; or you could just do this calculation yourself:

image.height = (parent.height - TabNavigator(parent).tabBar.height) * .9);