5 Replies Latest reply on Mar 17, 2010 12:16 PM by Jerry62712

    Why is the panel growing?

    Jerry62712 Level 1

      I've been away from Flex for several months and have forgotten why this happens.

       

      A vbox with a panel with a hbox with a text field are all set to 100% width.  But they are growing to 100% height as well.  The text takes about 3-4 lines with 10 inches of blank space below it.  I thought that if you didn't put in a height it would take the height from the contents, not the maximum size of the page.

       

      Help?

        • 1. Re: Why is the panel growing?
          AdrianWiecek Level 3

          Hi,

           

          It's weird, can you paste this code?

           

          Regards,

          Adrian

          • 2. Re: Why is the panel growing?
            Jerry62712 Level 1

                        <mx:VBox id="fsPageTitleNoticeVBox"

                            label="Notice"

                             width="100%" height="60">

                            <mx:Panel id="fsPageTitleNoticePanel"

                                horizontalScrollPolicy="off" verticalScrollPolicy="off"

                                layout="vertical"

                                headerHeight="6"

                                paddingBottom="0" width="100%">

                                <mx:Canvas id="pageTitleNoticeHBox"

                                    horizontalAlign="center" width="100%">

                                    <DHSclasses:AutoResizableTextArea id="fsPageTitleNoticeText"

                                        text="{pageTitleNoticeText}"

                                        styleName="labelStyle"

                                        wordWrap="true"

                                        autoResize="true"

                                        editable="false"

                                        focusThickness="1"

                                        tabIndex="20" width="100%"/>

                                </mx:Canvas>

                            </mx:Panel>

                        </mx:VBox>

             

            I"ve moved the "height=60" to each of the areas to no effect.

            • 3. Re: Why is the panel growing?
              AdrianWiecek Level 3

              Hi,

               

              Parse error at '>\n\t\t\t\t' comes from this: "</mx:Canvas>>" - you have two greater than signs.

               

              horizontalAlign has no effect in Canvas, because it uses absolute positioning - you can position children of canvas in the middle using horizontalCenter="0" and verticalCenter="0".

               

              When I use standard TextArea in your code it looks to be fine:

               

              <mx:VBox id="fsPageTitleNoticeVBox"
                      label="Notice"
                      width="100%"
                      height="60">
                      <mx:Panel id="fsPageTitleNoticePanel"
                          horizontalScrollPolicy="off" verticalScrollPolicy="off"
                          layout="vertical"
                          headerHeight="6"
                          paddingBottom="0" width="100%">
                          <mx:Canvas id="pageTitleNoticeHBox"
                              width="100%">
                              <mx:TextArea id="fsPageTitleNoticeText"
                                  text="Some teeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeext"
                                  styleName="labelStyle"
                                  wordWrap="true"
                                  editable="false"
                                  focusThickness="1"
                                  tabIndex="20" width="100%"/>
                          </mx:Canvas>
                      </mx:Panel>
                  </mx:VBox>

               

              Maybe your custom AutoResizableTextArea has incorrectly implemented measure() method?

               

              Regards,

              Adrian

              • 4. Re: Why is the panel growing?
                Jerry62712 Level 1

                Thanks for looking at it.  I had found the extra ">" and the horizonalAlign while trying to change the HBox to a canvas.

                 

                The Autosize text was put in because Flex doesn't display the whole text (textarea) by default and a simple text doesn't allow wordwrapping.  It brings in 2 lines and adds a scroll bar.  I don't know the size it will be at run time as the user can change the language (Spanish takes a lot more words) and font size.

                 

                I didn't write the auto resizing component, but here it is incase you are interested:

                <?xml version="1.0" encoding="utf-8"?>
                <mx:TextArea xmlns:mx="http://www.adobe.com/2006/mxml">
                    <mx:Script>
                        <![CDATA[

                 

                            // auto resize setting
                            private var _autoResizable:Boolean = false;

                 

                            // getter
                            [Bindable(event="changeAutoResize")]
                            public function get autoResize():Boolean
                            {
                                return _autoResizable;
                            }

                 

                            // setter
                            public function set autoResize(b:Boolean):void
                            {
                                _autoResizable = b;

                 

                                // if the text field component is created
                                // and is auto resizable
                                // we call the resize method
                                if (this.mx_internal::getTextField() != null &&
                                    _autoResizable == true)
                                    resizeTextArea();

                 

                                // dispatch event to make the autoResize
                                // property bindable
                                dispatchEvent(new Event("changeAutoResize"));
                            }

                 

                            // setter override
                            override public function set text(value:String):void
                            {
                                // calling super method
                                super.text = value;

                 

                                // if is auto resizable we call
                                // the resize method
                                if (_autoResizable)
                                    resizeTextArea();
                            }

                 

                            // resize function for the text area
                            private function resizeTextArea():void
                            {
                                // initial height value
                                // if set to 0 scroll bars will
                                // appear to the resized text area
                                var totalHeight:uint = 10;

                 

                                // validating the object
                                this.validateNow();

                 

                                // find the total number of text lines
                                // in the text area
                                var noOfLines:int = this.mx_internal::getTextField().numLines;

                 

                                // iterating through all lines of
                                // text in the text area
                                for (var i:int = 0; i < noOfLines; i++)
                                {
                                    // getting the height of one text line
                                    var textLineHeight:int =
                                    this.mx_internal::getTextField().getLineMetrics(i).height;

                 

                                    // adding the height to the total height
                                    totalHeight += textLineHeight;
                                }

                 

                                // setting the new calculated height
                                this.height = totalHeight;
                            }
                        ]]>
                    </mx:Script>
                </mx:TextArea>

                • 5. Re: Why is the panel growing?
                  Jerry62712 Level 1

                  The rather unhelpful answer appears to be "because it can."  If I put in an absolute width then it behaves properly.  If I put in the prefered percentage then it grows lengthwise by an extra billion pixels (or so it seems).  I guess I have to live with it being a fixed size as the problem of having it only partially appear with scroll bars is a bigger problem.

                   

                  I'm afraid in that case that JAWS won't get the whole text, only what appears on the screen.