Adjusting the Z-Index of a DropShadow (C#)
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:
[!code-aspxMain]
1: <asp:Panel ID="panelShadow" runat="server" CssClass="panel" Width="300px">
2: ASP.NET AJAX is a free framework for quickly creating a new generation of more
3: efficient, more interactive and highly-personalized Web experiences that work
4: across all the most popular browsers.<br />
5: ASP.NET AJAX is a free framework for quickly creating a new generation of more
6: efficient, more interactive and highly-personalized Web experiences that work
7: across all the most popular browsers.<br />
8: ASP.NET AJAX is a free framework for quickly creating a new generation of more
9: efficient, more interactive and highly-personalized Web experiences that work
10: across all the most popular browsers.<br />
11: </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):
[!code-aspxMain]
1: <asp:Panel ID="panelMenu" runat="server" CssClass="ForegroundStyle">
2: <asp:Menu ID="menu1" runat="server" ForeColor="Red" Orientation="Horizontal">
3: <Items>
4: <asp:MenuItem Text="One">
5: <asp:MenuItem Text="1.1" />
6: <asp:MenuItem Text="1.2" />
7: </asp:MenuItem>
8: <asp:MenuItem Text="Two" />
9: <asp:MenuItem Text="Three" />
10: </Items>
11: </asp:Menu><br />
12: </asp:Panel>
Then, the DropShadowExtender is added to extend the panelShadow panel with a drop shadow effect:
[!code-aspxMain]
1: <ajaxToolkit:DropShadowExtender ID="dse1" runat="server"
2: TargetControlID="panelShadow"
3: Opacity="0.5" Rounded="true" />
Finally, the ASP.NET AJAX ScriptManager control enables the Control Toolkit to work:
[!code-aspxMain]
1: <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
[!code-cssMain]
1: <style type="text/css">
2: .ForegroundStyle {z-index: 123; position: relative;}
3: .panel {background-color: navy;}
4: </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)
)
|
|