7 Replies Latest reply on Sep 26, 2011 12:27 AM by Flex harUI

    Image and <mx:Text> in flex

    Umesh Gamit Level 1

      hi friends


      when i bind Text with HtmlText (Img tag) without height width it's not showing img but when i set height and width it will show image,


      So my que is is it possible to set Text height with image height(every time i render image with different size so i need to resize<mx:Text> from IMG height width)


      private var myText:String = "<img src='chk.png'>";

      private  function TextWithImage():void



                      /*myTextBox.width = 200;

                      myTextBox.height = 200;*/


                      myTextBox.htmlText = myText;



      <mx:Text id="myTextBox" />


      thnx in adv

        • 1. Re: Image and <mx:Text> in flex
          Umesh Gamit Level 1

          is there any way to set height and width to Text component from Html Image Tag

          • 2. Re: Image and <mx:Text> in flex
            Flex harUI Adobe Employee

            If you  have an idea of the image size, then set it as the minWidth/minHeight.  Otherwise, you may have to subclass and change the measurement logic.

            • 3. Re: Image and <mx:Text> in flex
              Umesh Gamit Level 1

              thnx flex harUI


              here my whole Multiline CheckBox code




              import flash.display.DisplayObject;

              import flash.text.TextLineMetrics;

              import mx.controls.CheckBox;

              import mx.core.IFlexDisplayObject;

              import mx.core.mx_internal;

              use namespace mx_internal;


              public class MultilineCheckBox extends CheckBox



                  public function MultilineCheckBox()





                  override protected function createChildren():void


                      if (!textField)


                          textField = new NoTruncationUITextField();

                          textField.styleName = this;






                      textField.multiline = true;

                      textField.wordWrap = true;



                  override protected function measure():void


                      if (!isNaN(explicitWidth))


                          var tempIcon:IFlexDisplayObject = getCurrentIcon();

                          var w:Number = explicitWidth;

                          if (tempIcon)

                              w -= tempIcon.width + getStyle("horizontalGap") + getStyle("paddingLeft") + getStyle("paddingRight");

                          textField.width = w;






                  override public function measureText(s:String):TextLineMetrics


                      textField.htmlText = s;

                      var lineMetrics:TextLineMetrics = textField.getLineMetrics(0);

                      lineMetrics.width = textField.textWidth + 4;

                      lineMetrics.height = textField.textHeight + 4;

                      return lineMetrics;


                  override protected function updateDisplayList(unscaledWidth:Number,unscaledHeight:Number):void


                      super.updateDisplayList(unscaledWidth, unscaledHeight);

                      textField.htmlText = label;






              my O/P is like




              now when IMG tag coming how can i determine CheckBox Height from <img /> HxW?

              • 4. Re: Image and <mx:Text> in flex
                Umesh Gamit Level 1

                if it's not possible with this code u can suggest me another way or idea but i want reslove this issue in CheckBox Label


                thnx adv n pls help!........

                • 5. Re: Image and <mx:Text> in flex
                  Flex harUI Adobe Employee

                  This issue no longer has anything to do with mx:Text.


                  I would embed or preload the icons.  If you preload, copy the bitmaps and use them.  Then you’ll know the size up front.  It doesn’t look like you need to display the icon in the middle of the text, so you shouldn’t need to use TextField’s img tag, just a separate bitmap displayed next to the text.

                  • 6. Re: Image and <mx:Text> in flex
                    Umesh Gamit Level 1

                    thnx Flex harUI for your resplonce


                    in my case there is XML i given sample below



                                                <description>When we inspect...</description>


                                                    <option answer="true" id="1">&lt;img src=&quot;1.png&quot; /&gt;  </option>

                                                    <option answer="true" id="2">&lt;img src=&quot;2.png&quot; /&gt;  </option>

                                                    <option answer="false" id="3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero.</option>

                                                    <option answer="true" id="4">&lt;img src=&quot;4.png&quot; /&gt;  </option>




                    now every question i have option which is include option , now it's can be Text , Image or TextImage both so did u guys have any idea how to reslove my Image crop Issue and if it's not possible then can u suggest how can i do this thing.


                    Flex harUI says that Preload image and get Discription of image, then what i have to do........ everyting i have to search <IMG/> tag in my Label


                    thnx adv... replay or suggest me

                    • 7. Re: Image and <mx:Text> in flex
                      Flex harUI Adobe Employee

                      The answer depends on what assumptions you can make.  Are all the images the same size?  If not, do you want them to be so the rows aren’t different heights?


                      If you need variable row heights you will probably have to preload the images.