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が修正されますが、コンテナーテーブル内のすべてのセルがずれてシフトします。CalendarExtenderにも設定clear: both;してみましたが、背景が消えてしまいます。

4

2 に答える 2

5

わかりました:)

問題は、テーブルセルのCSSにありました。セルの幅を変更すると、CalenderExtenderによって書き込まれるテーブル内のセルの幅も変更されます。

これを回避するために、テーブルとその子要素のすべてのfloatを削除し、新しいクラスを宣言して幅を設定し、カレンダーを含むセルから省略しました。

.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 に答える