Language

Adjusting the Z-Index of a DropShadow (C#)

By Christian Wenz|

Download Code or Download PDF

The DropShadow control in the AJAX Control Toolkit extends a panel with a drop shadow. However this shadow sometimes conflicts with other controls, for instance the ASP.NET Menu control. When a menu entry pops up, it appears behind the drop shadow.

Overview

The DropShadow control in the AJAX Control Toolkit extends a panel with a drop shadow. However this shadow sometimes conflicts with other controls, for instance the ASP.NET Menu control. When a menu entry pops up, it appears behind the drop shadow.

Steps

The code commences with the Panel itself, containing enough text so that the panel contains enough text for the effect to be visible:

<asp:Panel ID="panelShadow" runat="server" CssClass="panel" Width="300px"> ASP.NET AJAX is a free framework for quickly creating a new generation of more efficient, more interactive and highly-personalized Web experiences that work across all the most popular browsers.<br /> ASP.NET AJAX is a free framework for quickly creating a new generation of more efficient, more interactive and highly-personalized Web experiences that work across all the most popular browsers.<br /> ASP.NET AJAX is a free framework for quickly creating a new generation of more efficient, more interactive and highly-personalized Web experiences that work across all the most popular browsers.<br /> </asp:Panel>

Another panel is placed directly before the panelShadow panel. It contains a menu with horizontal orientation so that menu entries appear over (or rather: under) the dropShadow panel):

<asp:Panel ID="panelMenu" runat="server" CssClass="ForegroundStyle"> <asp:Menu ID="menu1" runat="server" ForeColor="Red" Orientation="Horizontal"> <Items> <asp:MenuItem Text="One"> <asp:MenuItem Text="1.1" /> <asp:MenuItem Text="1.2" /> </asp:MenuItem> <asp:MenuItem Text="Two" /> <asp:MenuItem Text="Three" /> </Items> </asp:Menu><br /> </asp:Panel>

Then, the DropShadowExtender is added to extend the panelShadow panel with a drop shadow effect:

<ajaxToolkit:DropShadowExtender ID="dse1" runat="server" TargetControlID="panelShadow" Opacity="0.5" Rounded="true" />

Finally, the ASP.NET AJAX ScriptManager control enables the Control Toolkit to work:

<asp:ScriptManager ID="asm" runat="server" />

When you run this script, the menu entries appear underneath the panel. However the menu uses the CSS class panel where you just have to define two things to make elements appear in front of the other panel:

  • Relative positioning
  • A positive z-index

<style type="text/css"> .ForegroundStyle {z-index: 123; position: relative;} .panel {background-color: navy;} </style>

Then, the DropShadowExtender control does not conflict any longer with the Menu control.

Before: The menu entry is not visible (Click to view full-size image)

After: The menu entry appears (Click to view full-size image)

Author Information

Christian Wenz

Christian Wenz – Christian Wenz is an author, trainer, and consultant. His main focus of working and writing is on web technologies and security. Christian has written or co-written over 100 books for various publishers. He works with both open source and closed source web technologies. This leads to the unusual situation that he has both been awarded a Microsoft MVP for ASP/ASP.NET and is listed in Zend's Who is Who of PHP. He is also listed in Mozilla's credits (about:credits) and is considered an expert in browser-agnostic JavaScript.