24
Dec
07

Changing the Flex DateChooser control’s text alignment

The following example shows how you can change the text alignment in the Flex DateChooser control by setting the textAlign style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/12/24/changing-the-flex-datechooser-controls-text-alignment/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="textAlign:">
                <mx:ComboBox id="comboBox" selectedIndex="1">
                    <mx:dataProvider>
                        <mx:Array>
                            <mx:Object label="left" />
                            <mx:Object label="center" />
                            <mx:Object label="right" />
                        </mx:Array>
                    </mx:dataProvider>
                </mx:ComboBox>
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:DateChooser id="dateChooser"
            textAlign="{comboBox.selectedItem.label}" />

</mx:Application>

View source is enabled in the following example.

For an example of aligning the month name and year, see “Aligning headers in a DateChooser control in Flex”.


2 Responses to “Changing the Flex DateChooser control's text alignment”


  1. 1 Anthony Jun 5th, 2008 at 1:26 pm

    Is there a way to align the Month and Year title in the header?

  2. 2 peterd Jun 5th, 2008 at 4:06 pm

    Anthony,

    How about this:

    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    
        <mx:Style>
            .dateChooserHeaderStyles {
                fontWeight: bold;
                textAlign: left;
            }
        </mx:Style>
    
        <mx:DateChooser headerStyleName="dateChooserHeaderStyles" />
    
    </mx:Application>
    

    Peter

    Actually, I turned this into a full example. For more information, see “Aligning headers in a DateChooser control in Flex”.

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;".