Question

我使用Ajax日历扩展程序和我的自定义css类。这些应用得很好，但问题是当页面底部的任何日历打开时，由于形式的限制边界，它会在底部被切割。如何在表单边界上重叠并可以获得日历的完整视图。 enter image description here

在上图中，底部的蓝线是表格边框。以下是我用来设置日历样式的类

.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;
}

什么是合适的CSS？

Answer 1

试试这个，

/* 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>

Ajax日历扩展器在底部切断

1 个答案: