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

    Flex 3 UITextField height and layout problem




      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;



      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" />


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


      <mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" 


      Any suggestions?


      Thank you.



        • 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.