Monday, March 26, 2012

DropShadowExtender displaying differently

I have discovered that if I put a DropShadowExtender on a PopupControlExtender, it will make the popup not be transparent. In other words, it will cover any dropdownlists or textboxes on the form that the popup pops up over. I have written a date selection user control using these two controls. When I put the user control on one of my pages, the drop shadow works just fine. When I put it on another page, the drop shadow displays about 2 inches lower and to the right than it does on the first page. Any ideas what could be causing it to get confused like this?

Below is my user control code:

<%@dotnet.itags.org. Control Language="C#" AutoEventWireup="true" CodeFile="DatePicker.ascx.cs" Inherits="User_Controls_DatePicker" %
<aspAjax:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:TextBox ID="tbDateSelected" runat="server" SkinID="DateTextBox" AutoPostBack="True"
OnTextChanged="tbDateSelected_TextChanged" CausesValidation="True"></asp:TextBox>
<asp:Image ID="imgPopupCal" runat="server" ImageUrl="~/images/calendar.gif" AlternateText="Select a date" />
<asp:Panel ID="Panel1" runat="server" CssClass="popupControl">
<center>
<asp:Calendar ID="Calendar1" runat="server" BackColor="White" BorderColor="#999999"
CellPadding="1" DayNameFormat="Shortest" Font-Names="Verdana" Font-Size="8pt"
ForeColor="Black" Width="160px" OnSelectionChanged="Calendar1_SelectionChanged">
<SelectedDayStyle BackColor="#666666" Font-Bold="True" ForeColor="White" />
<TodayDayStyle BackColor="#CCCCCC" ForeColor="Black" />
<SelectorStyle BackColor="#CCCCCC" />
<WeekendDayStyle BackColor="#FFFFCC" />
<OtherMonthDayStyle ForeColor="#808080" />
<NextPrevStyle VerticalAlign="Bottom" />
<DayHeaderStyle BackColor="#CCCCCC" Font-Bold="True" Font-Size="7pt" />
<TitleStyle BackColor="#999999" BorderColor="Black" Font-Bold="True" />
</asp:Calendar>
<asp:ImageButton ID="imgCancel" runat="server" ImageUrl="../images/close.gif" OnClick="imgCancel_Click" />
</center>
</asp:Panel>
<ajaxToolkit:PopupControlExtender ID="pceDate" runat="server" PopupControlID="Panel1"
TargetControlID="imgPopupCal" Position="Bottom" CommitProperty="value" CommitScript="/* SEE OnLoad */">
</ajaxToolkit:PopupControlExtender>
<ajaxToolkit:DropShadowExtender ID="DropShadowExtender1" runat="server" TargetControlID="Panel1"
Radius="6" Opacity="1" TrackPosition="true" Width="5">
</ajaxToolkit:DropShadowExtender>
</ContentTemplate>
</aspAjax:UpdatePanel>

Thanks,

Nick

Another thing I've noticed on the second page is that the dropshadow does not cover the textboxes and dropdown lists.

No comments:

Post a Comment