CODEWITHSUNDEEP
asp.netcssajaxcontroltoolkit
Rajaram Shelar
Rajaram Shelar

Reputation: 7877

Ajax calendar extender cuts off at bottom

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. enter image description here

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?

Upvotes: 0

Views: 2740

Answers (1)

watraplion
watraplion

Reputation: 287

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>

Upvotes: 1

Related Questions