Avatar of robbersrow
robbersrow asked on

In Flex, how do I make a <mx:VBox> collapse and expand to fit its content?

Within my <mx:Application> I immediately have a <mx:VBox> wrapper around the rest of my content.  The idea is to have the VBox expand/collapse depending on the height of the page I am viewing.  I have several pages of various heights.  The problem is that the VBox takes on the height of the contents within the initial page that I am viewing, and does not expand or collapse when I view other pages with content of different heights.  How do I make a <mx:VBox> collapse/expand to fit its content?
Apache FlexWeb Applications

Avatar of undefined
Last Comment

8/22/2022 - Mon

if you set the height it will maintain that height. If you do not set the height, it will resize to fit the content. Just set the height empty

I was not setting the height in the first place, as you can see below in the code.  I have pasted my main code structure below.  As you can see, the inner VBox wraps my ViewStack, which contains my different component pages (aboutBox, supportBox, etc..).  There is also an outer VBox (immediately inside of the <mx:Application>) that wraps the entire code (except for the Application).  Neither the outer VBox or inner VBox seem to get resized when the ViewStack changes.
<mx:VBox id="vBoxWrapper" width="968" top="0" horizontalCenter="0" borderStyle="solid" borderColor="#000000" borderThickness="1" verticalGap="0">
		<mx:Canvas width="100%" height="60">
			<mx:MenuBar id="mainMenuBar" styleName="whiteFont" menuStyleName="blackFont" top="0" left="0" width="100%" height="45" labelField="label" click="handleMenuBarClickEvent(mainMenuBar.selectedIndex);" itemClick="handleSubMenuBarClickEvent(event);" dataProvider="{menuBarArrayCollection}">
			<mx:Image source="com/komelon/images/layout/komelon_usa_trans.gif" right="0" top="0" scaleContent="true"/>
			<mx:Canvas top="45" height="15" width="100%" backgroundColor="#ffa600" borderStyle="solid" borderSides="bottom" borderColor="#000000"/>
		<mx:VBox id="vBoxInnerWrapper" width="100%" verticalGap="0">
			<mx:ViewStack id="mainStack" width="100%" selectedChild="{controlViewToShow(_model.workflowState)}">
        		<kom:HomeBox id="homeBox"/>
				<kom:AboutBox id="aboutBox"/>
				<kom:SupportBox id="supportBox"/>
				<kom:BuyBox id="buyBox"/>
				<kom:ProductBox id="productBox" show="resizeWrappers()"/>
		<mx:Canvas width="100%" height="60">
    		<mx:Canvas bottom="45" height="15" width="100%" backgroundColor="#ffa600" borderSides="top" borderThickness="1" borderColor="#000000" borderStyle="solid"/>
			<mx:MenuBar id="footerMenuBar" styleName="whiteFont" menuStyleName="blackFont" bottom="0" left="0" width="100%" height="45" labelField="label" click="handleMenuBarClickEvent(mainMenuBar.selectedIndex);" itemClick="handleSubMenuBarClickEvent(event);" dataProvider="{footerMenuBarArrayCollection}">

Open in new window


I apologize for the unclean way that my code is tabbed in the above snippet.  Basically, the outer VBox contains 3 children: Canvas - VBox - Canvas.  The inner VBox itself contains a ViewStack, which itself contains the component pages (aboutBox, supportBox, etc..).  These component pages are themselves made up of either Canvas, VBox, or HBox of various height, some explicitly set heights, some not.  Please let me know if I can clarify anything, or if you need any further information.  Thanks.
This is the best money I have ever spent. I cannot not tell you how many times these folks have saved my bacon. I learn so much from the contributors.

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
See how we're fighting big data
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question

It worked.  Thank you for your solution.

It worked.  Thank you for your solution!

thank you!
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.