Asp.net-Ajax

日曆擴展器未正確顯示

  • October 31, 2012

我在我的頁面上使用了 ajax 日曆擴展器控制項,雖然擴展器塊顯示正確,但它的內容卻沒有:

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,但這使它的背景消失了。

好的,我已經想通了:)

問題在於表格單元格的 CSS。修改單元格的寬度也修改了由日曆擴展器寫入的表格中的單元格的寬度。

為了解決這個問題,我刪除了表格上的所有浮點數及其子元素,並聲明了一個新類來設置寬度,然後我從包含日曆的單元格中省略了該寬度:

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

我在 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>

使用這種方法,您不必更改所有表格的樣式,只需專注於討厭的日曆即可。

引用自:https://stackoverflow.com/questions/12142548