ajax日曆擴展器 - 自定義高度導致視圖重疊

我有一個日曆擴展器，它被隱藏到一個隱藏的文本框和一個按鈕。ajax日曆擴展器 - 自定義高度導致視圖重疊

<cc2:CalendarExtender ID="TextBox2_CalendarExtender" CssClass="custom-calendar" runat="server" TargetControlID="f_BookingDate" PopupButtonID="f_BookingDateButton" 
    Format="dd/MM/yyyy" PopupPosition="BottomRight" FirstDayOfWeek="Monday" OnClientDateSelectionChanged="UpdateAvailability"> 
</cc2:CalendarExtender>

我正在創建一個單獨的樣式表，當它是一個移動訪問頁面時將應用於我的頁面。

我的問題是，我的老闆覺得日曆的標準尺寸有點小。我正在使用其他人在其他地方提出的建議，但它仍然太小。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />

所以它不是縮放，因爲我已經看到建議其他地方。

我是用CSS修補和迄今拿出的下方。

這是偉大的，因爲它使每個工作日較大，更容易用手指進行選擇。

但是，當涉及到ajax似乎處理它的方式切換到幾個月和幾年時，它將頂部：139px應用於.ajax__calendar_days將其從日曆視圖分流出去。

但因爲我的每一個觀點，現在200像素（只是一個測試大小可能會改變這一點），你它們之間輕彈的意見現在的頂部和底部重疊，看起來很messey。

有什麼方法控制日曆如何定義它的尺寸上飛的變化？

/* Ajax Control Toolkit Calendar */ 

.ajax__calendar_container  
{ 
    left:5% !important; 
    width:90% !important; 
    background-color:#fff; 
    border:solid 1px #a6c9e2 !important; 
} 

.ajax__calendar_header  {background-color:#87b6d9; margin-bottom:5px; height: 26px !important;} 
.ajax__calendar_prev {} 

.ajax__calendar_title {height:26px; color:#fff; line-height:26px;} 
.ajax__calendar_hover .ajax__calendar_title {color:#eee !important;} 

.ajax__calendar_next {} 

.ajax__calendar_prev,.ajax__calendar_next{background-color:#dce6f4;width:26px !important; height:26px !important; color:#fff !important;} 

.ajax__calendar_body  {width:100% !important; height:200px !important;} 

.ajax__calendar_days {width:100% !important; height:200px !important} 
.ajax__calendar_months {width:100% !important; height:200px !important} 
.ajax__calendar_years {width:100% !important; height:200px !important} 

.ajax__calendar_months table {height:200px !important} 

.ajax__calendar_days table thead tr td {background-color:#fff; color:#000; font-weight:bold;} 

.ajax__calendar_dayname {width:100% !important; text-align:center !important; border:0 !important;} 

.ajax__calendar_day {text-align:center !important; border:1px solid #c5dbec !important; background:#eaf4fd; margin:1px !important; height:26px !important; width:90% !important;} 

.ajax__calendar_month {text-align:center !important; width:100% !important;vertical-align:middle !important} 

.ajax__calendar_month, .ajax__calendar_day {color:#2e6e9e; font-weight:bold; } 

.ajax__calendar_year {text-align:center !important; } 

.ajax__calendar_footer   {border-top:1px solid #c5dbec !important; line-height:1.2em;} 

.ajax__calendar_today  {border:1px solid #c5dbec; background-color:#e1effb;} 

.ajax__calendar_hover   {} 
td.ajax__calendar_hover div  {background:#d2e6f5 !important; border:1px solid #79b7e7 !important;} 

.ajax__calendar_active   {} 
td.ajax__calendar_active div {background:#fbec88 !important; border:1px solid #fad42e !important;} 

.ajax__calendar_other   {} 

.ajax__calendar_other .ajax__calendar_day {text-align:center !important; font-weight:normal !important; color:#bbb !important; border:1px solid #eee !important;} 

.ajax__calendar_hover.ajax__calendar_other .ajax__calendar_day {background:#efefef !important; color:#aaa !important; border:1px solid #ddd !important;}

來源

2013-06-27 lifeconfused

我找到了解決方案。我用OnClientShown屬性

<cc2:CalendarExtender ID="TextBox2_CalendarExtender" CssClass="custom-calendar" runat="server" TargetControlID="f_BookingDate" PopupButtonID="f_BookingDateButton" 
    Format="dd/MM/yyyy" PopupPosition="BottomRight" FirstDayOfWeek="Monday" OnClientDateSelectionChanged="UpdateAvailability" OnClientShown="onClientShown"> 
</cc2:CalendarExtender>

，然後在我的腳本

<asp:ScriptManager ID="f_WebBookingScriptManager" runat="server"> 
</asp:ScriptManager> 
<script type="text/javascript" language="javascript"> 
    function onClientShown(sender, e) { 
     sender._height = 200; 
    } 
</script>

這臺集裝箱的動態高度。它認爲的日曆行爲的一部分

來源

2013-06-28 11:09:26 lifeconfused

ajax日曆擴展器 - 自定義高度導致視圖重疊

回答

相關問題