2 Replies Latest reply on Oct 13, 2010 3:32 PM by laxmidi

    Flex 3 UITextField height and layout problem

    laxmidi Level 1

      Hi,

       

      I'm using Flex 3, SDK 3.2.

       

      I'm having problems determining the height of a UITextField. (Unfortunately, I have to use the UITextField because I'm using FlashEff 2.0. Otherwise, I'd use a different component).

       

      I've got a UITextfield that is multiline and has wordWrap. The text is pulled from a database, so the length varies. I've got a radioButtonGroup underneath the UITextField.

       

      My goals are:

       

      a) To keep the UITextField from crashing into the radioButtonGroup's VBox.

      b) I want to change the y position of the radioButtonGroup based on the height of the UITextField.

      c) The TitleWindow's height should be variable. The UITextField and the radioButtonGroup are in a TitleWindow. I'd like to change the height of the TitleWindow based on the contents inside.

       

      At the moment, I've set y of the  radioButtonGroup way down on the TitleWindow, so that the UITextField's content doesn't overlap. But, when there isn't too much text in the UITextField, I get a huge gap between the radioButtonGroup's VBox and it.

       

      I've Googled and from what I can tell, the UITextField's height behaves weirdly.

       

      Does anyone know how to solve this problem?

       

      I create the UITextField like this:

       

      public var tf:UITextField = new UITextField;
      

              tf.autoSize = TextFieldAutoSize.LEFT;
           tf.embedFonts = true;
           tf.multiline = true;
           tf.text = myText;
           tf.width = 440;
           tf.wordWrap = true;
           var myFormat:TextFormat = new TextFormat;
           myFormat.size = 25;
           myFormat.blockIndent=53;
      
           this.addChild(tf);
           tf.validateNow();
           tf.setTextFormat(myFormat);
      

       

       

      My VBox looks like this:

       

      <mx:VBox  id="radioVBox" x="180" y="220">
           <mx:RadioButtonGroup id="myRadioButtonGroup" itemClick="goClickHandler(event);"/>
           <mx:RadioButton  groupName="myRadioButtonGroup" label="A"  fontSize="17" />
           <mx:RadioButton  groupName="myRadioButtonGroup" label="B"  fontSize="17" />
           <mx:RadioButton  groupName="myRadioButtonGroup" label="C"  fontSize="17" />
           <mx:RadioButton  groupName="myRadioButtonGroup" label="D"  fontSize="17" />
           <mx:RadioButton  groupName="myRadioButtonGroup" label="E"  fontSize="17" />
      </mx:VBox>
      

       

      And it's all wrapped in a TitleWindow that looks like this:

       

      <mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" 
           layout="absolute" 
           width="520"  
              height="450"
              verticalScrollPolicy="off" 
           horizontalScrollPolicy="off" 
            >
      
      

       

      Any suggestions?

       

      Thank you.

       

      -Laxmidi

        • 1. Re: Flex 3 UITextField height and layout problem
          rtalton Level 4

          Can you put the text field in the VBox, above the radio buttons? The VBox should

          resize and accomodate accordingly.

          • 2. Re: Flex 3 UITextField height and layout problem
            laxmidi Level 1

            Hi rtalton,

             

            Thank you for the message.

             

            Previously, I tried exactly what you suggested. But, I couldn't get it to work. But, your message inspired me to try it again.

             

            Then I figured out that the radioVBox was shifting up and overlapping the MainBox, because the UITextField is dynamic and has a FlashEff2 effect on it. Basically, the height of the MainBox is 0 when radioVBox's layout is calculated.

             

            So, I add the UITextField to one VBox. Below that I've got the radioVBox. I set the radioVBox's visibility to false. Then I added an eventListener for when the FlashEff2 effect ended, which called a function that turned on the radioVBox's visibility. Also, in the function I set: radioVBox.y = (tf.y + tf.height + 40);. Lastly, I set the TitleWindow's height as follows: height="{radioVBox.y + 270}"

             

            Thank you.

             

            -Laxmidi