[Webinar] Streamline your web hosting managementRegister Today

x
?
Solved

Flex VBox's height expanding when adding children

Posted on 2010-03-25
3
Medium Priority
?
740 Views
Last Modified: 2012-08-13
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

0
Comment
Question by:stockblocks
  • 2
3 Comments
 

Author Comment

by:stockblocks
ID: 28593492
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
 
LVL 23

Accepted Solution

by:
Siva Prasanna Kumar earned 2000 total points
ID: 28619806
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
 

Author Closing Comment

by:stockblocks
ID: 31707238
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

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In this tutorial I will show you how to use the Windows Speech API in Delphi. I will only cover basic functions such as text to speech and controlling the speed of the speech. SAPI Installation First you need to install the SAPI type library, th…
In my programming career I have only very rarely run into situations where operator overloading would be of any use in my work.  Normally those situations involved math with either overly large numbers (hundreds of thousands of digits or accuracy re…
Is your OST file inaccessible, Need to transfer OST file from one computer to another? Want to convert OST file to PST? If the answer to any of the above question is yes, then look no further. With the help of Stellar OST to PST Converter, you can e…
Is your organization moving toward a cloud and mobile-first environment? In this transition, your IT department will encounter many challenges, such as navigating how to: Deploy new applications and services to a growing team Accommodate employee…

612 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question