Ajax calendar extender cuts off at bottom - asp.net

Question

I used Ajax calendar extender with my custom css classes. These are applied well but problem is that when any calendar which is at bottom of page opens, it get cut at bottom due to restricted boundary of form. How can I overlap on the form boundary and can get full view of Calendar.
In above image blue line at bottom is the form border. Also below are the classes that I used to styling the calendar
.calendarContainer
table th
{
padding: 0!important;
margin: 0!important;
border: 0!important;
}
.calendarContainer
table td
{
padding: 0!important;
margin: 0!important;
border: 0!important;
}
.calendarContainer .ajax__calendar_container {
background-color: #DEF1F4;
border: solid 1px #A1DCF2;
z-index : 10000 ;
}
.calendarContainer .ajax__calendar_header
{
background-color: #ffffff;
margin-bottom: 4px;
}
.calendarContainer .ajax__calendar_title,
.calendarContainer .ajax__calendar_next,
.calendarContainer .ajax__calendar_prev {
color: #004080;
padding-top: 3px;
}
.calendarContainer .ajax__calendar_body {
background-color: #ffffff;
border: solid 1px #A1DCF2;
z-index : 10000 ;
}
.calendarContainer .ajax__calendar_dayname {
text-align:center;
margin-bottom: 4px;
margin-top: 2px;
color: #004080;
}
.calendarContainer .ajax__calendar_day {
color: #004080;
text-align:center;
}
What could be the appropriate css?

Answer 1

Try this,
/* css for Ajax calandar control. */
.Calendar td
{
text-align: left;
padding: 0px;
height: 19px;
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
color:#333;
}
.Calendar .ajax__calendar_container
{
background-color: white;
border: solid 1px #cccccc;
}
.Calendar .ajax__calendar_header
{
background-color: #ffffff;
margin-bottom: 4px;
}
.Calendar .ajax__calendar_title, .Calendar .ajax__calendar_next, .Calendar .ajax__calendar_prev
{
color: black;
padding-top: 3px;
}
.Calendar .ajax__calendar_body
{
background-color: white;
border: solid 1px #cccccc;
}
.Calendar .ajax__calendar_dayname
{
text-align: center;
font-weight: bold;
margin-bottom: 4px;
margin-top: 2px;
}
.Calendar .ajax__calendar_day
{
text-align: center;
}
.Calendar .ajax__calendar_hover .ajax__calendar_day, .Calendar .ajax__calendar_hover .ajax__calendar_month, .Calendar .ajax__calendar_hover .ajax__calendar_year, .Calendar .ajax__calendar_active
{
color: #004080;
font-weight: bold;
background-color: silver;
}
.Calendar .ajax__calendar_today
{
font-weight: bold;
}
.Calendar .ajax__calendar_other
{
color: #bbbbbb;
}
.Calendar .ajax__calendar_hover .ajax__calendar_today, .Calendar .ajax__calendar_hover .ajax__calendar_title
{
color: Blue;
}
/* End */
aspx:
<cc1:CalendarExtender ID="cetbDate" runat="server" Enabled="True" Format="dd/MM/yyyy"
TargetControlID="tbFromDate" PopupPosition="TopLeft" CssClass="Calendar">
</cc1:CalendarExtender>