0

カスタム css クラスで Ajax カレンダー エクステンダーを使用しました。これらはうまく適用されますが、問題は、ページの下部にあるカレンダーを開くと、フォームの境界が制限されているために下部が切り取られることです。フォームの境界をオーバーラップして、カレンダー全体を表示するにはどうすればよいですか。ここに画像の説明を入力

上の画像では、下部の青い線がフォームの境界線です。また、以下は、カレンダーのスタイリングに使用したクラスです

.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 インデックス: 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 に答える