0

我将 Ajax 日历扩展器与我的自定义 css 类一起使用。这些应用得很好，但问题是当页面底部的任何日历打开时，由于表单边界的限制，它会在底部被剪切。如何在表单边界上重叠并获得日历的完整视图。在此处输入图像描述

在上图中底部的蓝线是表单边框。下面还有我用来设置日历样式的类

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

边框：实心 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？

4

1 回答 1

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>
于 2013-05-24T04:24:17.830 回答