1

问题

让我先发泄一下，这个控件必须是有史以来最糟糕的控件，除非你想要它就像他们如何定制它一样棒极了，否则祝你好运。

我对 CSS 文件做了很多调整，我想我已经很好地掌握了一切是如何设置的。我的问题是我修改了这个控件的高度，现在如果您正在查看月份或年份，它将在底部显示部分日期名称。在调试它以找出为什么我发现控件硬编码月视图下方天的位置之后，并且由于我更改了控件的高度，因此它关闭了大约 15px。导致问题的确切标记是：

style="position: absolute; left: 0px; top: 139px;"

我已经通过将最高值编辑为 155px 来确认这一点，一切都很好。

我的问题是，我该如何解决这个问题？

TL;DR - 你如何改变 CalendarExtender 的高度？

截屏

在此处输入图像描述

设计视图

<table class="DataSelection">
    <tr>
        <th class="DataSelectionTableHeader">Employee Selection</th>
        <th class="DataSelectionTableHeader">Start Date</th>
        <th class="DataSelectionTableHeader">End Date</th>
        <th class="DataSelectionTableHeader">View By</th>
        <th class="DataSelectionTableHeader">Submit</th>
    </tr>
    <tr>
        <td class="DataSelectionTableData">
            <asp:DropDownList ID="ddlEmployee" runat="server"  DataTextField="Employee_Name" DataValueField="Employee_ID" AutoPostBack="false" Width="150" />
        </td>
        <td class="DataSelectionTableData">
            <asp:TextBox ID="tbxCalExtenderStart" runat="server" Height="16" />
            <asp:CalendarExtender ID="calExtenderStart" runat="server" Animated="true" FirstDayOfWeek="Sunday" PopupPosition="BottomRight" 
                TargetControlID="tbxCalExtenderStart" CssClass="Calendar" DefaultView="Days" PopupButtonID="popupButtonStart" />
            <asp:Image ID="popupButtonStart" runat="server" src="Assets/Images/Icons/Calendar.png" height="16" width="16" CssClass="PopupImg" />
        </td>
        <td class="DataSelectionTableData">
            <asp:TextBox ID="tbxCalExtenderEnd" runat="server" Height="16" />
            <asp:CalendarExtender ID="calExtenderEnd" runat="server" Animated="true" FirstDayOfWeek="Sunday" PopupPosition="BottomRight" 
                TargetControlID="tbxCalExtenderEnd" CssClass="Calendar" DefaultView="Days" PopupButtonID="popupButtonEnd" />
            <asp:Image ID="popupButtonEnd" runat="server" src="Assets/Images/Icons/Calendar.png" height="16" width="16" CssClass="PopupImg" />
        </td>
        <td class="DataSelectionTableData">
            <asp:DropDownList ID="ddlView" runat="server"  DataTextField="View_Name" DataValueField="View_ID" AutoPostBack="false" Width="75" />
        </td>
        <td class="DataSelectionTableData">
            <asp:Button ID="btnSubmit" runat="server" Text="Submit" />
        </td>
    </tr>
</table>

CSS 文件

div.ajax__calendar_days table tr td {
    padding-right: 0px;
}

.Calendar .ajax__calendar_container {
    border: 1px solid #E0E0E0;
    background-color: #FAFAFA;
    width: 175px;
}
.Calendar .ajax__calendar_header {
    font-family: Tahoma, Calibri, sans-serif;
    font-size: 12px;
    text-align: center;
    color: #9F9F9F;
    font-weight: normal;
    text-shadow: 0px 0px 2px #D3D3D3;
    height: 20px;
} 
.Calendar .ajax__calendar_title,
.Calendar .ajax__calendar_next,
.Calendar .ajax__calendar_prev {color: #004080;}
.Calendar .ajax__calendar_body {
    width: 175px;
    height: 150px;
    position: relative;
}
.Calendar .ajax__calendar_dayname {
    font-family: Tahoma, Calibri, sans-serif;
    font-size: 10px;
    text-align: center;
    color: #FA9900;
    font-weight: bold;
    text-shadow: 0px 0px 2px #D3D3D3;
    text-align: center !important;
    background-color: #EDEDED;
    border: solid 1px #D3D3D3;
    text-transform: uppercase;
    margin: 1px;
} 
.Calendar .ajax__calendar_day {
    font-family: Tahoma, Calibri, sans-serif;
    font-size: 10px;
    text-align: center;
    font-weight: bold;
    text-shadow: 0px 0px 2px #D3D3D3;
    text-align: center !important;
    border: solid 1px #E0E0E0;
    text-transform: uppercase;
    margin: 1px;
    width: 17px !important;
    color: #9F9F9F;
}
.Calendar .ajax__calendar_hover .ajax__calendar_day,
.Calendar .ajax__calendar_hover .ajax__calendar_month,
.Calendar .ajax__calendar_hover .ajax__calendar_year,
.Calendar .ajax__calendar_active {
    color: red; 
    font-weight: bold; 
    background-color: #ffffff;
}
.Calendar .ajax__calendar_year {
    border: solid 1px #E0E0E0;
    font-family: Tahoma, Calibri, sans-serif;
    font-size: 10px;
    text-align: center;
    font-weight: bold;
    text-shadow: 0px 0px 2px #D3D3D3;
    text-align: center !important;
    vertical-align: middle;
    margin: 1px;
}

.Calendar .ajax__calendar_month {
    border: solid 1px #E0E0E0;
    font-family: Tahoma, Calibri, sans-serif;
    font-size: 10px;
    text-align: center;
    font-weight: bold;
    text-shadow: 0px 0px 2px #D3D3D3;
    text-align: center !important;
    vertical-align: middle;
    margin: 1px;
}

.Calendar .ajax__calendar_today {
    font-family: Tahoma, Calibri, sans-serif;
    font-size: 10px;
    text-align: center;
    font-weight: bold;
    text-shadow: 0px 0px 2px #D3D3D3;
    text-align: center !important;
    text-transform: uppercase;
    margin: 1px;
    color: #6B6B6B;
}
.Calendar .ajax__calendar_other {
    background-color: #E0E0E0;
    margin: 1px;
    width: 17px;
}
.Calendar .ajax__calendar_hover .ajax__calendar_today,
.Calendar .ajax__calendar_hover .ajax__calendar_title {

}
.Calendar .ajax__calendar_footer {
    width: 175px;
    border: none;
    height: 20px;
    vertical-align: middle;
    color: #6B6B6B;
}

img.PopupImg {
    vertical-align: middle;
    padding: 0px;
    margin: 0px;
    border: none;
}

输出铬检查

<div class="ajax__calendar_days" id="calExtenderStart_days" style=
"position: absolute; left: 0px; top: 139px;">
    <table border="0" cellpadding="0" cellspacing="0" id=
    "calExtenderStart_daysTable" style="margin: auto;">
        <thead id="calExtenderStart_daysTableHeader">
            <tr id="calExtenderStart_daysTableHeaderRow">
                <td>
                    <div class="ajax__calendar_dayname">
                        Su
                    </div>
                </td>

                <td>
                    <div class="ajax__calendar_dayname">
                        Mo
                    </div>
                </td>

                <td>
                    <div class="ajax__calendar_dayname">
                        Tu
                    </div>
                </td>

                <td>
                    <div class="ajax__calendar_dayname">
                        We
                    </div>
                </td>

                <td>
                    <div class="ajax__calendar_dayname">
                        Th
                    </div>
                </td>

                <td>
                    <div class="ajax__calendar_dayname">
                        Fr
                    </div>
                </td>

                <td>
                    <div class="ajax__calendar_dayname">
                        Sa
                    </div>
                </td>
            </tr>
        </thead>

        <tbody id="calExtenderStart_daysBody">
            <tr>
                <td class="ajax__calendar_other">
                    <div class="ajax__calendar_day" id=
                    "calExtenderStart_day_0_0" title=
                    "Sunday, January 26, 2014">
                        26
                    </div>
                </td>

                <td class="ajax__calendar_other">
                    <div class="ajax__calendar_day" id=
                    "calExtenderStart_day_0_1" title=
                    "Monday, January 27, 2014">
                        27
                    </div>
                </td>

                <td class="ajax__calendar_other">
                    <div class="ajax__calendar_day" id=
                    "calExtenderStart_day_0_2" title=
                    "Tuesday, January 28, 2014">
                        28
                    </div>
                </td>

                <td class="ajax__calendar_other">
                    <div class="ajax__calendar_day" id=
                    "calExtenderStart_day_0_3" title=
                    "Wednesday, January 29, 2014">
                        29
                    </div>
                </td>

                <td class="ajax__calendar_other">
                    <div class="ajax__calendar_day" id=
                    "calExtenderStart_day_0_4" title=
                    "Thursday, January 30, 2014">
                        30
                    </div>
                </td>

                <td class="ajax__calendar_other">
                    <div class="ajax__calendar_day" id=
                    "calExtenderStart_day_0_5" title=
                    "Friday, January 31, 2014">
                        31
                    </div>
                </td>

                <td class="">
                    <div class="ajax__calendar_day" id=
                    "calExtenderStart_day_0_6" title=
                    "Saturday, February 01, 2014">
                        1
                    </div>
                </td>
            </tr>

            <tr>
                <td class="">
                    <div class="ajax__calendar_day" id=
                    "calExtenderStart_day_1_0" title=
                    "Sunday, February 02, 2014">
                        2
                    </div>
                </td>

                <td class="">
                    <div class="ajax__calendar_day" id=
                    "calExtenderStart_day_1_1" title=
                    "Monday, February 03, 2014">
                        3
                    </div>
                </td>

                <td class="">
                    <div class="ajax__calendar_day" id=
                    "calExtenderStart_day_1_2" title=
                    "Tuesday, February 04, 2014">
                        4
                    </div>
                </td>

                <td class="">
                    <div class="ajax__calendar_day" id=
                    "calExtenderStart_day_1_3" title=
                    "Wednesday, February 05, 2014">
                        5
                    </div>
                </td>

                <td class="">
                    <div class="ajax__calendar_day" id=
                    "calExtenderStart_day_1_4" title=
                    "Thursday, February 06, 2014">
                        6
                    </div>
                </td>

                <td class="">
                    <div class="ajax__calendar_day" id=
                    "calExtenderStart_day_1_5" title=
                    "Friday, February 07, 2014">
                        7
                    </div>
                </td>

                <td class="">
                    <div class="ajax__calendar_day" id=
                    "calExtenderStart_day_1_6" title=
                    "Saturday, February 08, 2014">
                        8
                    </div>
                </td>
            </tr>

            <tr>
                <td class="">
                    <div class="ajax__calendar_day" id=
                    "calExtenderStart_day_2_0" title=
                    "Sunday, February 09, 2014">
                        9
                    </div>
                </td>

                <td class="">
                    <div class="ajax__calendar_day" id=
                    "calExtenderStart_day_2_1" title=
                    "Monday, February 10, 2014">
                        10
                    </div>
                </td>

                <td class="">
                    <div class="ajax__calendar_day" id=
                    "calExtenderStart_day_2_2" title=
                    "Tuesday, February 11, 2014">
                        11
                    </div>
                </td>

                <td class="">
                    <div class="ajax__calendar_day" id=
                    "calExtenderStart_day_2_3" title=
                    "Wednesday, February 12, 2014">
                        12
                    </div>
                </td>

                <td class="">
                    <div class="ajax__calendar_day" id=
                    "calExtenderStart_day_2_4" title=
                    "Thursday, February 13, 2014">
                        13
                    </div>
                </td>

                <td class="ajax__calendar_today">
                    <div class="ajax__calendar_day" id=
                    "calExtenderStart_day_2_5" title=
                    "Friday, February 14, 2014">
                        14
                    </div>
                </td>

                <td class="">
                    <div class="ajax__calendar_day" id=
                    "calExtenderStart_day_2_6" title=
                    "Saturday, February 15, 2014">
                        15
                    </div>
                </td>
            </tr>

            <tr>
                <td class="">
                    <div class="ajax__calendar_day" id=
                    "calExtenderStart_day_3_0" title=
                    "Sunday, February 16, 2014">
                        16
                    </div>
                </td>

                <td class="">
                    <div class="ajax__calendar_day" id=
                    "calExtenderStart_day_3_1" title=
                    "Monday, February 17, 2014">
                        17
                    </div>
                </td>

                <td class="">
                    <div class="ajax__calendar_day" id=
                    "calExtenderStart_day_3_2" title=
                    "Tuesday, February 18, 2014">
                        18
                    </div>
                </td>

                <td class="">
                    <div class="ajax__calendar_day" id=
                    "calExtenderStart_day_3_3" title=
                    "Wednesday, February 19, 2014">
                        19
                    </div>
                </td>

                <td class="">
                    <div class="ajax__calendar_day" id=
                    "calExtenderStart_day_3_4" title=
                    "Thursday, February 20, 2014">
                        20
                    </div>
                </td>

                <td class="">
                    <div class="ajax__calendar_day" id=
                    "calExtenderStart_day_3_5" title=
                    "Friday, February 21, 2014">
                        21
                    </div>
                </td>

                <td class="">
                    <div class="ajax__calendar_day" id=
                    "calExtenderStart_day_3_6" title=
                    "Saturday, February 22, 2014">
                        22
                    </div>
                </td>
            </tr>

            <tr>
                <td class="">
                    <div class="ajax__calendar_day" id=
                    "calExtenderStart_day_4_0" title=
                    "Sunday, February 23, 2014">
                        23
                    </div>
                </td>

                <td class="">
                    <div class="ajax__calendar_day" id=
                    "calExtenderStart_day_4_1" title=
                    "Monday, February 24, 2014">
                        24
                    </div>
                </td>

                <td class="">
                    <div class="ajax__calendar_day" id=
                    "calExtenderStart_day_4_2" title=
                    "Tuesday, February 25, 2014">
                        25
                    </div>
                </td>

                <td class="">
                    <div class="ajax__calendar_day" id=
                    "calExtenderStart_day_4_3" title=
                    "Wednesday, February 26, 2014">
                        26
                    </div>
                </td>

                <td class="">
                    <div class="ajax__calendar_day" id=
                    "calExtenderStart_day_4_4" title=
                    "Thursday, February 27, 2014">
                        27
                    </div>
                </td>

                <td class="">
                    <div class="ajax__calendar_day" id=
                    "calExtenderStart_day_4_5" title=
                    "Friday, February 28, 2014">
                        28
                    </div>
                </td>

                <td class="ajax__calendar_other">
                    <div class="ajax__calendar_day" id=
                    "calExtenderStart_day_4_6" title=
                    "Saturday, March 01, 2014">
                        1
                    </div>
                </td>
            </tr>

            <tr>
                <td class="ajax__calendar_other">
                    <div class="ajax__calendar_day" id=
                    "calExtenderStart_day_5_0" title=
                    "Sunday, March 02, 2014">
                        2
                    </div>
                </td>

                <td class="ajax__calendar_other">
                    <div class="ajax__calendar_day" id=
                    "calExtenderStart_day_5_1" title=
                    "Monday, March 03, 2014">
                        3
                    </div>
                </td>

                <td class="ajax__calendar_other">
                    <div class="ajax__calendar_day" id=
                    "calExtenderStart_day_5_2" title=
                    "Tuesday, March 04, 2014">
                        4
                    </div>
                </td>

                <td class="ajax__calendar_other">
                    <div class="ajax__calendar_day" id=
                    "calExtenderStart_day_5_3" title=
                    "Wednesday, March 05, 2014">
                        5
                    </div>
                </td>

                <td class="ajax__calendar_other">
                    <div class="ajax__calendar_day" id=
                    "calExtenderStart_day_5_4" title=
                    "Thursday, March 06, 2014">
                        6
                    </div>
                </td>

                <td class="ajax__calendar_other">
                    <div class="ajax__calendar_day" id=
                    "calExtenderStart_day_5_5" title=
                    "Friday, March 07, 2014">
                        7
                    </div>
                </td>

                <td class="ajax__calendar_other">
                    <div class="ajax__calendar_day" id=
                    "calExtenderStart_day_5_6" title=
                    "Saturday, March 08, 2014">
                        8
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>
4

1 回答 1

4

让它工作的快速修复（如果将高度保持在 150px 不那么重要）。修改你的css后，我得到以下内容。

修改了日历的css

这是我改变的。

  • ajax__calendar_body : 修改高度为 139px
  • ajax__calendar_day：增加了 15px 的高度
  • ajax__calendar_year：增加了 40px 的高度
  • ajax__calendar_month：增加了 40px 的高度

为什么将 body 的高度更改为 139px（默认）？嗯，这有点难以用语言来解释，但基本上如果你将高度修改为 139 以外的任何值，你就会遇到看到其他视图的问题。

例如，所有三个视图（年、月、日）都在表单上，​​但在任何给定时刻只有一个可见。可见的视图将顶部样式设置为 0px。其他两个视图是 -139px 或 139px。由于您将高度设置为 150 像素，因此无法正常显示。你如何改变这种行为？不知道，也许有人可以启发我们。

供您参考，问题中的元素是 calExtenderEnd_days、calExtenderEnd_months 和 calExtenderEnd_years。

所以我所做的是修改你的css，使身体高度保持在139px。其他样式已更改以降低高度，因此它们垂直适合您应用的某些样式增加了整体高度（填充和其他）。日样式更改为 15px（默认 17），与年月的 40px（默认 44）相同。您可以根据需要使用这些值。

希望这对你没问题。

下面是我修改的。

    .Calendar .ajax__calendar_body
    {
        width: 175px;
        height: 139px; /* modified */
        position: relative;
    }

    .Calendar .ajax__calendar_day
    {
        font-family: Tahoma, Calibri, sans-serif;
        font-size: 10px;
        text-align: center;
        font-weight: bold;
        text-shadow: 0px 0px 2px #D3D3D3;
        text-align: center !important;
        border: solid 1px #E0E0E0;
        text-transform: uppercase;
        margin: 1px;
        width: 17px !important;
        color: #9F9F9F;
        height: 15px; /* added */
    }

    .Calendar .ajax__calendar_year
    {
        border: solid 1px #E0E0E0;
        font-family: Tahoma, Calibri, sans-serif;
        font-size: 10px;
        text-align: center;
        font-weight: bold;
        text-shadow: 0px 0px 2px #D3D3D3;
        text-align: center !important;
        vertical-align: middle;
        margin: 1px;
        height: 40px; /* added */
    }

    .Calendar .ajax__calendar_month
    {
        border: solid 1px #E0E0E0;
        font-family: Tahoma, Calibri, sans-serif;
        font-size: 10px;
        text-align: center;
        font-weight: bold;
        text-shadow: 0px 0px 2px #D3D3D3;
        text-align: center !important;
        vertical-align: middle;
        margin: 1px;
        height: 40px; /* added */
    }

更新

所以我看了一下日历行为的源代码。现在我的 javascript 不是最好的，但看起来 139px 是硬编码的？

您可以在此处查看代码，只需搜索139：http ://ajaxcontroltoolkit.codeplex.com/SourceControl/latest#Client/MicrosoftAjax.Extended/Calendar/CalendarBehavior.pre.js

我在不同的行上注意到了这些：

this._height = 139;
$common.setLocation(newElement, { x: 0, y: -this._height });
$common.setLocation(oldElement, { x: 0, y: 0 });
$common.setLocation(newElement, { x: 0, y: 139 });
于 2014-02-15T21:50:49.823 回答