1 Reply Latest reply on Jul 8, 2010 8:36 AM by rootsounds

    Layout Problem: Text in VBox with percentHeight

    skider

      I'm using Flex 3. I'm having a lot of problems with putting a Text component inside a VBox component with percentHeight set. The behavior that I'm trying to get is that the VBox will have a scrollbar that will allow all the text to be viewed. The behavior that I'm getting is that the VBox resizes to the full height of the Text component, and ignores its percentHeight. I would use a TextArea instead of a Text nested in a VBox, but I need to put other components inside the VBox as well, and I want the VBox to be able to scroll through all the items inside of it.

       

      Here is an example application illustrating my problem:

       

      <?xml version="1.0"?>
      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
          <mx:VBox width="100%" height="10%" borderStyle="solid" backgroundColor="white">
              <mx:Text width="100%">
                  <mx:text>
                      <![CDATA[Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eleifend ultrices mi,
      nec ornare eros commodo non. Vestibulum dapibus placerat magna vel imperdiet. Nullam vel libero eget
      metus auctor tempus. Curabitur pulvinar faucibus orci, eget eleifend odio fermentum in. Pellentesque
      habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi porta
      vulputate nunc a ultrices. Aliquam ultricies eros vel libero interdum ullamcorper. Nam felis nibh,
      adipiscing ut vulputate at, hendrerit eget enim. Suspendisse eu eleifend nibh. Curabitur metus erat,
      semper at ultrices ac, mattis at nulla.
                      ]]>
                  </mx:text>
              </mx:Text>
          </mx:VBox>
      </mx:Application>

       

      When resizing the browser window horizontally, the VBox changes its width to match, but when resizing vertically, the VBox remains constantly at the height of its contents, and ignores the 'height="10%"'.

       

      Can anyone suggest a way to get the behavior that I'm trying to achieve?

        • 1. Re: Layout Problem: Text in VBox with percentHeight
          rootsounds Level 4

          Just wrap a Canvas around the VBox:

           

          skider wrote:

           

          I'm using Flex 3. I'm having a lot of problems with putting a Text component inside a VBox component with percentHeight set. The behavior that I'm trying to get is that the VBox will have a scrollbar that will allow all the text to be viewed. The behavior that I'm getting is that the VBox resizes to the full height of the Text component, and ignores its percentHeight. I would use a TextArea instead of a Text nested in a VBox, but I need to put other components inside the VBox as well, and I want the VBox to be able to scroll through all the items inside of it.

           

          Here is an example application illustrating my problem:

           

          <?xml version="1.0"?>
          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
             <mx:Canvas verticalScrollPolicy="on" width="100%" height="10%">

               <mx:VBox width="100%" height="10%" borderStyle="solid" backgroundColor="white">
                  <mx:Text width="100%">
                      <mx:text>
                          <![CDATA[Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eleifend ultrices mi,
          nec ornare eros commodo non. Vestibulum dapibus placerat magna vel imperdiet. Nullam vel libero eget
          metus auctor tempus. Curabitur pulvinar faucibus orci, eget eleifend odio fermentum in. Pellentesque
          habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi porta
          vulputate nunc a ultrices. Aliquam ultricies eros vel libero interdum ullamcorper. Nam felis nibh,
          adipiscing ut vulputate at, hendrerit eget enim. Suspendisse eu eleifend nibh. Curabitur metus erat,
          semper at ultrices ac, mattis at nulla.
                          ]]>
                      </mx:text>
                  </mx:Text>
              </mx:VBox>

          </mx:Canvas>
          </mx:Application>

           

          When resizing the browser window horizontally, the VBox changes its width to match, but when resizing vertically, the VBox remains constantly at the height of its contents, and ignores the 'height="10%"'.

           

          Can anyone suggest a way to get the behavior that I'm trying to achieve?