8

我在我的页面上使用了 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，但这使它的背景消失了。

4

2 回答 2

5

好的，我已经想通了：）

问题在于表格单元格的 CSS。修改单元格的宽度也修改了由日历扩展器写入的表格中的单元格的宽度。

为了解决这个问题，我删除了表格上的所有浮点数及其子元素，并声明了一个新类来设置宽度，然后我从包含日历的单元格中省略了该宽度：

.tblForm 
{
    display: block;
}
.tblForm tr.wider td, tblForm .wider
{
    width: 245px;
}
于 2012-09-07T13:20:28.813 回答
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>

使用这种方法，您不必更改所有表格的样式，只需专注于讨厌的日历即可。

于 2012-10-31T16:18:13.307 回答