Monday, April 11, 2011

How can I remove drop shadow from TextInput?

I have a style sheet in my Flex Application, referenced as:

<mx:Style source="/assets/stylesheets/default.css" />

In this style sheet, I set dropShadowEnabled to true gloablly:

global {
    fontSize: 11pt;
    dropShadowEnabled: true;
    verticalAlign: "middle";
}

This gives a drop shadow to many components, including all TextInputs.

However, I have a Title Window component that displays an editable ComboBox and I don't want that Text Input to have a drop shadow. I can't get it to go away however. I've tried the following:

Creating a CSS class selector...

<mx:ComboBox editable="true" dataProvider="{nameOptions}" textInputStyleName="noDropShadow" />

...in the default CSS:

.noDropShadow {
    dropShadowEnabled: false;
}

...in the Title Window:

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

...also:

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

None of these removed the drop shadow. What am I missing here?

From stackoverflow
  • One solution would be to remove "dropShadowEnabled: true;" from the global style and put it only on the items you specifically want drop shadow.

    Eric Belair : Yes, I thought of this. It may be my best option, unfortunately.
  • Give your combo-box an id attribute and then:

    combo_box_id.setStyle( "dropShadowEnabled", false );

    In your <mx:Script/> block.

0 comments:

Post a Comment

Note: Only a member of this blog may post a comment.