TAGS :Viewed: 16 - Published at: a few seconds ago

[ AJAX Calender User Control Next and Previous button Issue ]

I created Ajax Calender Extender as a user control and using the same in various pages. My problem with the calender user control is, When I click on the Next and Previous buttons in the calender It is not navigating previous month or next month.

AJAX version is : 4.1.40412.2

AJAX Calendar CSS :

.ajax_calendar { position: relative; left: 0px !important; top: 0px !important; visibility: visible; display: block; background-color: Red; } .ajax_calendar iframe { left: 0px !important; top: 0px !important; }

Here is my user Control is :

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="UCCalender.ascx.cs"
Inherits="test.Web.Pages.UserControls.UCCalender" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxControl" %>

&lt;div style="position:relative;border:solid 1px red;"&gt;
&lt;asp:TextBox ID="txtDate" MaxLength="10" CssClass="txtBox medium" ToolTip="DD/MM/YYYY"
    Style="width: 85px;" Font-Size="11px" runat="server"&gt;&lt;/asp:TextBox&gt;
&lt;asp:ImageButton ImageUrl="~/Resources/Images/calendar.gif" ID="imgCalender" runat="Server"
    BorderWidth="0" ImageAlign="absmiddle" /&gt;
&lt;ajaxControl:CalendarExtender ID="AjaxCalenderCtrl" runat="server" Format="dd/MM/yyyy" PopupPosition ="TopLeft" 
    TargetControlID="txtDate" FirstDayOfWeek="Sunday" PopupButtonID="imgCalender"&gt;
&lt;ajaxControl:TextBoxWatermarkExtender WatermarkCssClass="watermark" ID="txtWaterMarkDate"
    runat="server" WatermarkText="DD/MM/YYYY" TargetControlID="txtDate"&gt;
&lt;asp:RegularExpressionValidator ID="regexpvalEndDateEdit" ErrorMessage="!" ValidationExpression="(0[1-9]|[12][0-9]|3[01])[- /.](0[1-9]|1[012])[- /.](19|20)\d\d"
    ControlToValidate="txtDate" runat="server"&gt;&lt;/asp:RegularExpressionValidator&gt;

And I am using the same UserControl in the pages in this way:

 &lt;table id="inputDetails" style="padding: 0px; width: 700px;" cellpadding="0" cellspacing="0"&gt;

                                &lt;td style="width: 198px; position: relative" align="left"&gt;
                                    &lt;asp:Label ID="lblBeginning" runat="server" Text="Beginning :" Style="margin-left: 10px;"&gt;&lt;/asp:Label&gt;
                                    &lt;asp:TextBox ID="tbxBeginCalendar" TabIndex="3" runat="server" Style="width: 85px;" Font-Size="11px"&gt;&lt;/asp:TextBox&gt;

                            &lt;asp:ImageButton ID="BeginCal" runat="server" ImageUrl= "~/Resources/Images/calendar.gif" /&gt;
                                  &lt;uc1:UCCalender ID="UCCalStartDate" runat="server" /&gt;


Please provide the solution for this post.

Answer 1

This problem happens when you browse the CalendarExtender in IE8. You need to add the following CSS class to have the problem solved: .MyCalendar .ajax__calendar_title { border: none; /* Fixes the "previous" and "next" buttons in the popup title */ }

This is explained here: http://ajaxcontroltoolkit.codeplex.com/workitem/22894

Answer 2

I have just come across this same issue. It was seemingly being caused because I had applied position:relative to the parent element.

Adding this this CSS fixed the issue for me:

.ajax__calendar_prev, .ajax__calendar_next{z-index:1;}

Hope that helps!