Widgets Adobe Flex 3: Multiline text moves up by one line when selected


I dream in code

About the author

Robert Williams is an internet application developer for the Salem Web Network.
E-mail me Send mail
Go Daddy Deal of the Week: 30% off your order at! Offer expires 11/6/12

Recent comments




Code Project Associate Logo


The opinions expressed herein are my own personal opinions and do not represent my employer's view in anyway.

Adobe Flex 3: Multiline text moves up by one line when selected

In Adobe Flex, <mx:Text> controls are selectable. When compiled into flash .swf files, you will be able to highlight that text using the mouse when it appears in your browser. However, we found that when you highlight the text in a dynamic multiline text control that text actually moves/scrolls up a line which in our case caused the top line of text to disappear. One solution is to set the selectable property to false, but this is not ideal.

Steps to reproduce:
1. Create a dynamic Text field in AS and assign a multi line string to htmlText and set selectable=true (alternatively use <mx:Text>".
2. Select any portion of the text with the mouse in a top to bottom motion.
3. The text will move up exactly one line making the first line of the text disappear.  

The problem seems to be that textField.setActualSize doesn't consider the leading property when calculating the size. This bug is documented here, and the solution is in the comments but unless you have edited the source of the Felx sdk before, you might not know how to take full advantage of it, so I thought I'd document the steps I took to correct the problem.

  1. First locate the file, which using the default install settings should be found here: C:\Program Files\Adobe\Flex Builder 3\sdks\3.0.0\frameworks\projects\framework\src\mx\controls
  2. Comment out line 342 which should look like this:

    textField.setActualSize(unscaledWidth - paddingLeft - paddingRight, unscaledHeight - paddingTop - paddingBottom);
  3. Insert the following code beneath it:

    var leading:Number = getStyle("leading");
    textField.setActualSize(unscaledWidth - paddingLeft - paddingRight, unscaledHeight - paddingTop - paddingBottom + leading);
  4. Go back to Adobe Flex and right click on your project and choose "Properties".
  5. Click on "Flex Build Path".
  6. Click on "Add Folder".
  7. Paste/type or browse to C:\Program Files\Adobe\Flex Builder 3\sdks\3.0.0\frameworks\projects\framework\src and click "OK".
  8. Click "OK" again to exit the properties dialog.
  9. Run your project again and hightlight the text. It should not move.



Categories: Flash | Flex
Posted by Williarob on Thursday, July 23, 2009 2:00 PM
Permalink | Comments (2) | Post RSSRSS comment feed
blog comments powered by Disqus