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:

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.