ASP.NET CalendarExtender自定义高度问题
问题
首先让我发泄一下，这个控制必须是有史以来最糟糕的控制，除非你想要它如何定制它真棒，否则祝你好运。
我已经对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;
}
输出Chrome检查
<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>
1 个答案:
答案 0 :(得分：4)
快速修复以使其工作（如果将高度保持在150px并不重要）。修改你的CSS后，我得到以下内容。
这是我改变的。
- ajax__calendar_body ：修改后的身高为139px
- ajax__calendar_day ：添加了15px的高度
- ajax__calendar_year ：增加了40px的高度
- ajax__calendar_month ：已添加40px的高度
为什么要将身体的高度更改为139px（默认值）？好吧，用文字来解释有点难，但基本上如果你将高度修改为139以外的其他高度，你就会有看到其他观点的问题。
例如，所有三个视图（年，月，日）都在表单上，但在任何给定时刻只能看到一个。可见的视图将顶部样式设置为0px。另外两个视图是-139px或139px。由于您将高度设置为150px，因此无法正常显示。你如何改变这种行为？不知道，也许有人可以启发我们。
供参考的问题包括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 });
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？