Fix wrong position of CalendarExtender

Khi thêm CalendarExtender vào một số DataBound controls, thì xảy ra hiện tượng calendar hiển thị không đúng, tức là không hiển thị ngay phía dưới của Textbox. Sau đây là cách fix lỗi này:

Trang aspx:

<asp:TextBox ID="txtStartDate" runat="server"></asp:TextBox>
<asp:ImageButton ID="imgStartDate" ImageUrl="../images/calendar.gif" runat="server" CausesValidation="False" />
<ajaxToolkit:CalendarExtender id="CalendarExtender1" runat="server" TargetControlID="txtStartDate"
PopupButtonID="imgStartDate" CssClass="datePicker"></ajaxToolkit:CalendarExtender> 

Sau đó định nghĩa css này trong file stylesheet:

.datePicker

{
    position:relative;
    left:5px;
}

.datePicker .ajax__calendar_container
{
background-color:White!important;
border:1px solid blue!important;
z-index:50000;
}
.datePicker .ajax__calendar_hover .ajax__calendar_day
{background-color:#edf9ff;border-color:#daf2fc;color:#0066cc!important;}
.datePicker .ajax__calendar_hover .ajax__calendar_month
{background-color:#edf9ff;border-color:#daf2fc;color:#0066cc!important;}
.datePicker .ajax__calendar_hover .ajax__calendar_year
{background-color:#edf9ff;border-color:#daf2fc;color:#0066cc!important;}
.datePicker .ajax__calendar_hover .ajax__calendar_title
{color:#0066cc!important;}
.datePicker .ajax__calendar_hover .ajax__calendar_today
{color:#0066cc!important;}

Các style ở phía dưới có thể không có cũng được. Chủ yếu cho đẹp.