2012-08-27 111 views
8

我用我的網頁上的阿賈克斯日曆擴展的控制,雖然擴展塊顯示正確,它的內容並不:日曆擴展不正確顯示

Screenshot of CalendarExtender

這裏是我的代碼用它編寫到頁面:

<table class="tblForm"> 
    <tr> 
     <td valign="top"> 
      <asp:TextBox runat="server" ID="txtPickupDate" AutoPostBack="true"></asp:TextBox> 
      <aj:CalendarExtender runat="server" ID="calPickup" TargetControlID="txtPickupDate" Format="yyyy-MM-dd"> 
      </aj:CalendarExtender> 
     </td> 
    </tr> 
</table> 

有沒有直接應用到CalendarExtender任何樣式規則,但我有這個CSS這可能是相關的:

.tblForm 
{ 
    display: block; 
} 
.tblForm td 
{ 
    width: 245px; 
    float: left; 
} 

有沒有人見過這個?有誰知道它可能是什麼?

在此先感謝您的幫助!

編輯
我試圖消除浮動,雖然這樣可以修復CalendarExtender,還轉移容器表中的每個單元格對齊的。我也嘗試將clear: both;設置爲CalendarExtender,但這會使背景消失。

回答

5

好吧,我已經想通了:)

問題排在與CSS的表格單元格。修改單元格寬度還修改了由日曆擴展程序寫入的表格中單元格的寬度。

要解決這個問題,我刪除表上的所有花車和它的子元素,並宣佈一個新類來設置寬度,然後我從包含日曆小區省略:

.tblForm 
{ 
    display: block; 
} 
.tblForm tr.wider td, tblForm .wider 
{ 
    width: 245px; 
} 
+0

你還有問題嗎,或者解決了...? –

+0

@MayankPathak這已解決,謝謝:)你的查詢讓我想知道答案是否足夠清晰... – Ortund

3

我有類似的問題與ListView對象內的日曆擴展器。由於造型問題,它週五和週六總是被切斷。我最終通過包裹日曆擴展器(包括文本框和圖像)來繞過它,併爲它們分配一個覆蓋我的表的CSS的樣式。

#calendarContainerOverride table 
{ 
    width:0px; 
    height:0px; 
} 

#calendarContainerOverride table tr td 
{ 
    padding:0; 
    margin:0; 
} 

然後在這裏應用ID:

<tr id="calendarContainerOverride"> 
    <td style="padding-top:10px">  
    <asp:TextBox ID="txtStart" runat="server" %>' /> 
    <asp:CalendarExtender ID="extender" runat="server" Enabled="True" TargetControlID="txtStart" PopupButtonID="imgCalendarStart" /> 
    <asp:Image ID="imgCalendarStart" ImageUrl="~/Images/Calendar.png" runat="server"/> 
    </td> 
</td> 

使用這種方法,你不必更改所有表的造型,並且只專注在討厭的日曆。