08
Mar
08

Setting the text alignment in a TextArea control in Flex

The following example shows how you can left, center, right, or fully justify a block of text in the Flex TextArea control by setting the textAlign style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/03/08/setting-the-text-alignment-in-a-textarea-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.events.ItemClickEvent;

            private function toggleButtonBar_itemClick(evt:ItemClickEvent):void {
                textArea.setStyle("textAlign", evt.label);
            }
        ]]>
    </mx:Script>

    <mx:Array id="arr">
        <mx:String>left</mx:String>
        <mx:String>center</mx:String>
        <mx:String>right</mx:String>
        <mx:String>justify</mx:String>
    </mx:Array>

    <mx:String id="lorem" source="lorem.txt" />

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="textAlign:">
                <mx:ToggleButtonBar id="toggleButtonBar"
                        dataProvider="{arr}"
                        selectedIndex="0"
                        itemClick="toggleButtonBar_itemClick(event);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:TextArea id="textArea"
            text="{lorem}"
            textAlign="left"
            width="100%"
            height="100%" />

</mx:Application>

View source is enabled in the following example.


5 Responses to “Setting the text alignment in a TextArea control in Flex”


  1. 1 John Apr 7th, 2008 at 8:57 am

    Note: According to the Flex documetation (for both Flex 2 and 3) the only valid settings for the textAlign style are left, right and center. Indeed, in Flex Builder these are the only options that are presented when using auto-complete. As demonstrated in the example, however, justify does actually work as expected.

  2. 2 Sean Baker Oct 14th, 2008 at 9:23 am

    Peter,

    Is there any way to vertical align the text in a TextArea? I really need to get that working somehow.

    Thanks,

    Sean Baker.

  3. 3 peterd Oct 15th, 2008 at 8:35 am

    Sean Baker,

    I don’t believe there is a way to vertically align text in a TextArea control in Flex 3.

    Peter

  4. 4 dave Jan 24th, 2009 at 8:28 am

    fyi, i could not get textarea vertically aligned also.

    Instead, i set an explicit height for the TextArea and wrapped the TextArea within a HBox with verticalAlign=middle .

  5. 5 Peter deHaan Jan 24th, 2009 at 8:48 pm

    In other news, the Flex Gumbo FxTextArea control does support vertical alignment.
    For more information, see “Aligning text vertically within an FxTextArea control in Flex Gumbo”.

    Peter

Leave a Reply

This blog is terrible at eating HTML tags. If you plan on posting code/XML, please escape your "<" characters as "&lt;" and your ">" characters as "&gt;".




Badge Farm

  • Powered by Redoable 1.2
  • Cornify
  • Feeds burnt by Feedburner
  • Feed