6 Replies Latest reply on Sep 4, 2009 11:46 AM by Jerry62712

    How Do I: fix container size

    Jerry62712 Level 1

      The user can click a slider control to increase the size of the font (by switching CSS pages).  When the bigger fonts are selected, the containers will expand horizonally, but not vertically.  The result is the descenders are lost causing a readability problem.

       

      How can I get Flex to resize containers in both directions?  Here is a sample of my current code:

       

      <mx:HBox id="resultTextBox" 
          width="100%" 
          verticalScrollPolicy="off" horizontalScrollPolicy="off">
          <mx:Label id="resultPotentialResultsLabel" 
              toolTip=" "
              text=" " 
              tabIndex="201" />
           <mx:Text id="resultPotentialResultsData" 
               textAlign="right" 
               tabIndex="203" /> 
           </mx:HBox>
      ...
        • 1. Re: How Do I: fix container size
          Gregory Lafrance Level 6

          Maybe height="100%":

           

          <mx:HBox id="resultTextBox" width="100%" height="100%"

           

          If this post answered your question or helped, please mark it as such.

          • 2. Re: How Do I: fix container size
            Jerry62712 Level 1

            Sigh, that didn't work.

            • 3. Re: How Do I: fix container size
              babo_ya Level 3

              Can you try this.. just create a new project and copy/paste and run the app.

               

               

              <?xml version="1.0" encoding="utf-8"?>

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

               

              >

               

                  <mx:Script>

                      <![CDATA[

                          private function doSomething():void {              

                           //   ta1.styleName = "ItalicStyle";       

                           //   ta1.setFocus();

               

               

               

                      //        ta1.setSelection(0, 0);

                          }

               

                          private function onSliderChange(event:Event):void

                          {

                          trace("slider : " + slider.value);

                          var size:int = int(slider.value);

                          lbl.setStyle("fontSize", size);

                          }

               

               

                      ]]>

                  </mx:Script>

               

               

                  <mx:HSlider width="200" id="slider"

                  minimum="10" maximum="50" change="onSliderChange(event);"/>

               

                  <mx:HBox

                  borderColor="0xff0000" borderStyle="solid" borderThickness="2">

                 

                  <mx:Label text="HELLO" id="lbl" />

                 

                 

                  </mx:HBox>

               

              </mx:Application>

               

               

               

              Hope this helps,

               

              BaBo,

              • 4. Re: How Do I: fix container size
                Jerry62712 Level 1

                It's puzzeling.  With your single case and when I changed it to VBox and two labels it worked as expected.  Yet it doesn't work with my original.

                • 5. Re: How Do I: fix container size
                  babo_ya Level 3

                  Can you create a sample that doesn't work ?

                   

                  I can't really help you unless you create this.

                   

                  Please mark this answer helpful if this helped.

                   

                  BaBo,

                  • 6. Re: How Do I: fix container size
                    Jerry62712 Level 1

                    Sorry for the delay.  But I'm back now.  The attached zip has the application where it doesn't work.  There is a slider below the input form.  The first one is for the fonts and the second is for contrast.  Slide the first to the max (about 19 px) and the descenders are gone from the result page.

                     

                    To get to it, enter any number 1-99 in the first field and click the calculate (English) button below the form.