23
Dec
07

Removing the drop shadow from the DateField control in Flex

The following example shows how you can remove the default drop shadow from the nested DateChooser control in a Flex DateField control by setting the dropShadowEnabled style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/12/23/removing-the-drop-shadow-from-the-datefield-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">

    <mx:Style>
        .myDateChooser {
            dropShadowEnabled: false;
        }
    </mx:Style>

    <mx:Form>
        <mx:FormItem label="With drop shadow:">
            <mx:DateField />
        </mx:FormItem>
        <mx:FormItem label="Without drop shadow:">
            <mx:DateField dateChooserStyleName="myDateChooser" />
        </mx:FormItem>
    </mx:Form>

</mx:Application>

View source is enabled in the following example.


2 Responses to “Removing the drop shadow from the DateField control in Flex”


  1. 1 Bob Spidell Apr 22nd, 2008 at 5:39 pm

    I don’t see a difference between the two DateFields; am I missing something?

  2. 2 peterd Apr 22nd, 2008 at 5:54 pm

    Bob Spidell,

    Click the text field in the top DateField control. You should see a slight drop shadow around the pop up DateChooser control. The bottom DateField control removes the drop shadow around the pop up DateChooser control by setting the dateChooserStyleName and dropShadowEnabled styles.

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