Drop shadow tricks in Flex

06 Jun 2009

Archive Notice: This post is an archive post from my older blog. Comments are disabled and the information contained in it may no longer be accurate.

Every display markup language has its frustrating moments. Adobe Flex isn’t any exception. I ran into a little trouble a while back when trying to put a drop shadow on a HBox component. Here is the effect that I wanted to achieve:

HBox with dropshador

It seems easy enough so let’s give this a try:

<mx:Style>
HBox {
  paddingTop: 5;
  paddingBottom: 5;
  paddingLeft: 5;
  paddingRight: 5;
  dropShadowEnabled: true;
}
</mx:Style>

Usually the dropShadowEnabled: true would be enough but in this case you may be surprised if you put the above style into an MXML file with an HBox in it. Drop shadows don’t work on HBox components without some more tweaking. They don’t work for VBox, FormItem, Canvas, Grid, and Tile either. But dropShadowEnabled works beautifully to create Flex drop shadows on a component like TextInput.

What sets TextInput apart? It has a border by default. That is the key. Put borderStyle: solid in our style sheet then all the sudden our HBox has a drop shadow. Unfortunately it also has a nice one pixel border as well. To fix that we can set the borderThickness to zero and you’re done.

<mx:Style>
HBox {
  paddingTop: 5;
  paddingBottom: 5;
  paddingLeft: 5;
  paddingRight: 5;
  dropShadowEnabled: true;
  borderThickness: 0;
  borderStyle: solid;
}
</mx:Style>

Quick Two Point Summary

  • Drop shadows will be hidden if the component doesn’t have a border.
  • The border can be zero pixels.