Lịch Extender không hiển thị chính xác

Question

Tôi đang sử dụng một điều khiển mở rộng lịch ajax trên trang của mình, và mặc dù khối mở rộng xuất hiện một cách chính xác, nội dung của nó không:

Dưới đây là đoạn code tôi sử dụng để viết nó lên trang:

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

không có bất kỳ quy tắc phong cách bôi trực tiếp lên CalendarExtender, nhưng tôi có css này có thể có liên quan:

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

Có ai nhìn thấy điều này trước đây không? Có ai biết nó có thể là gì không?

Cảm ơn bạn đã giúp đỡ!

EDIT
tôi đã cố gắng loại bỏ các phao và mặc dù điều này sẽ cố định CalendarExtender, nó cũng chuyển tất cả các ô trong bảng chứa không thẳng hàng. Tôi cũng đã cố gắng thiết lập clear: both; cho CalendarExtender, nhưng điều này làm cho nền của nó biến mất.

Answer 1

OK tôi đã tìm ra nó :)

Sự cố xảy ra với CSS đó cho ô bảng. Việc sửa đổi chiều rộng của các ô cũng đã sửa đổi chiều rộng của các ô trong bảng được viết bởi Bộ mở rộng lịch.

Để làm được việc này, tôi loại bỏ tất cả các phao nổi trên bàn và đó là yếu tố con và tuyên bố một lớp mới để thiết lập chiều rộng mà tôi rồi bỏ đi từ các tế bào có chứa các lịch:

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

Answer 2

tôi đã tương tự vấn đề với bộ mở rộng lịch bên trong đối tượng ListView. Nó luôn luôn cắt đứt thứ Sáu và thứ Bảy do các vấn đề về kiểu dáng. Tôi đã kết thúc bằng cách gói các bộ mở rộng lịch của tôi (bao gồm cả hộp văn bản và hình ảnh), và gán cho chúng một kiểu ghi đè lên css của bảng của tôi.

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

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

Sau đó, áp dụng các id ở đây:

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

Với phương pháp này bạn không cần phải thay đổi phong cách cho tất cả các bảng của bạn, và chỉ tập trung vào lịch pesky.