Flex VBox's height expanding when adding children

A simple question that I hope someone can solve for me.   Run the attached single-file code and tell me what I'm doing wrong.

The problem is briefly this:  I want to have a historical list of html-capable items.  I chose to use a Label component.  When an "action" is to be reported, I place it at the top of the VBox so that the most recent report is always on top.  The VBox is set to 100% height.   When eventually enough Label children are added to the VBox, I want the VBox's (named "reportBox") vertical scroll bar to take over.  But instead, the VBox itself is expanding and causing it's parent container (named "userPanel") to generate a scroll bar.

I'm no doubt having a big mental block...   this should be an easy thing to do!

I hope someone can fix the attached code for me.

Thanks,
SB
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
                layout="absolute" 
                backgroundColor="#FFFFFF" 
                xmlns:local="*" 
                >
                
    <mx:Script>
        <![CDATA[
            import mx.controls.Label;
            [Bindable] private var myMessage : String = "I don't want the blue region's height to expand beyond it's "
                                                      + "current span. When adding dummy lines to the list, I want "
                                                      + "it's inner scroll bar to take control instead of the outer "
                                                      + "container's scroll bar to take control.\n\n"
                                                      + "Click the buttons below to see what I am talking about.";
                                                      
            [Bindable] private var myStatus : String = "";
            
            private function reportActivity( txt:String, txtColor:uint=0 ) : void {
              var L : Label = new Label();
              L.htmlText = txt;
              L.setStyle( "color", txtColor );
              reportBox.addChildAt( L, 0 ); 
              updateHeightReport();
            }

            private function updateHeightReport() : void {
               myStatus = "reportBox.height = " + reportBox.height;  
            }
            
            private function addDummyLines( numLines : int ) : void {
                for ( var i:int=0; i<numLines; i++ ) 
                   reportActivity( "This is a sample line <b>#" + (i+1) + "</b>" );
            }
        ]]>
    </mx:Script>

     
    <mx:HDividedBox borderColor="#000000" borderStyle="solid" borderThickness="3" width="100%" height="100%">
        <mx:VBox id="userPanel" horizontalAlign="center" width="200" height="100%" borderStyle="solid" borderThickness="3" cornerRadius="3" 
                 resize="{updateHeightReport()}" 
                 >
           
          <mx:TextArea width="100%" text="{myMessage}" height="200" />
 
          <mx:VBox id="reportBox" borderColor="#748693"  backgroundColor="#DAE4EC" width="100%" height="100%" verticalGap="0"  />

          <mx:Button label="Add 5 lines" width="100%"  click="{addDummyLines(5)}" />
          <mx:Button label="Add 10 lines" width="100%" click="{addDummyLines(10)}" />
          <mx:Button label="Add 15 lines" width="100%" click="{addDummyLines(15)}" />

        </mx:VBox>
      
        <mx:Canvas width="100%" height="100%">
            <mx:Label text="{myStatus}" width="100%" color="#0D44A8"  fontSize="19"/>
            
        </mx:Canvas>  

    </mx:HDividedBox>
</mx:Application>

Open in new window

stockblocksAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

stockblocksAuthor Commented:
Oh, and a followup comment.   I _DID_ find a graceful way about this.  Instead of a VBox with added Labels for each report action, I instead diverted to a TextArea and simply appended each report line to the htmlText property.  My code is attached.

But still the same, I've encountered other situations where I don't want an "inside" VBox to overpower the height of the container(s) that it is in.  So I'm still curious how my original question can be solved.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
                layout="absolute" 
                backgroundColor="#FFFFFF" 
                xmlns:local="*" 
                >
                
    <mx:Script>
        <![CDATA[
            import mx.controls.Label;
            [Bindable] private var myMessage : String = "ALL IS FINE HERE!";
                                                      
            [Bindable] private var myStatus : String = "";
            
            private function reportActivity( txt:String ) : void {
              reportBox.htmlText += txt + "\n";
            }

            private function addDummyLines( numLines : int ) : void {
                for ( var i:int=0; i<numLines; i++ ) 
                   reportActivity( "This is a sample line <b>#" + (i+1) + "</b>" );
            }
        ]]>
    </mx:Script>

     
    <mx:HDividedBox borderColor="#000000" borderStyle="solid" borderThickness="3" width="100%" height="100%">
        <mx:VBox id="userPanel" horizontalAlign="center" width="200" height="100%" borderStyle="solid" borderThickness="3" cornerRadius="3"  >
           
          <mx:TextArea width="100%" text="{myMessage}" height="52" />
 
         <mx:TextArea id="reportBox" borderColor="#748693"  backgroundColor="#DAE4EC" width="100%" height="100%" 
                         valueCommit="reportBox.verticalScrollPosition=reportBox.maxVerticalScrollPosition" />

          <mx:Button label="Add 5 lines" width="100%"  click="{addDummyLines(5)}" />
          <mx:Button label="Add 10 lines" width="100%" click="{addDummyLines(10)}" />
          <mx:Button label="Add 15 lines" width="100%" click="{addDummyLines(15)}" />

        </mx:VBox>
      
        <mx:Canvas width="100%" height="100%">
        </mx:Canvas>  

    </mx:HDividedBox>
</mx:Application>

Open in new window

0
Siva Prasanna KumarPrincipal Solutions ArchitectCommented:
You have to set the Vbox height to some value instead of 100% , but I am sure you expect it to be 100% hence you can do as below code:

So here we are setting the height relatively.


 <mx:HDividedBox borderColor="#000000" borderStyle="solid" borderThickness="3" width="100%" height="100%" id="hdBox">
        <mx:VBox id="userPanel" horizontalAlign="center" width="200" height="{hdBox.height}" borderStyle="solid" borderThickness="3" cornerRadius="3"  >

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
stockblocksAuthor Commented:
Your example isn't taking into account other UIComponents that might be above or below my VBox.  Unless I'm missing some point you're making.

I tried something similar wherebye I set a resize event for the outer VBox and in the function it calls I calculate the cumulative height of all children in that outer VBox ('userPanel' in my original example) but exclude ''reportBox'.  I then set reportBox's height to the difference between that summed value and the outer 'userPanel' height.   It worked, but I had cases where a button or two would be added into 'userPanel' on-the-fly, and that disrupted the workings of that function...  a timing thing, so to speak.

Anyway, I'll award the points!  But if you have any follow-up thoughts, by all means throw them at me.

Thanks again!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Delphi

From novice to tech pro — start learning today.