Question

我有一个日历扩展器，可以隐藏到隐藏文本框和按钮。

<cc2:CalendarExtender ID="TextBox2_CalendarExtender" CssClass="custom-calendar" runat="server" TargetControlID="f_BookingDate" PopupButtonID="f_BookingDateButton"
    Format="dd/MM/yyyy" PopupPosition="BottomRight" FirstDayOfWeek="Monday" OnClientDateSelectionChanged="UpdateAvailability">
</cc2:CalendarExtender>

我正在创建一个单独的样式表，当它是访问该页面的移动设备时将应用于我的页面。

我的问题是我的老板觉得日历的标准尺寸有点小。我正在使用其他人在其他地方建议的，但它仍然太小。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />

所以它不是缩放的问题，因为我已经看到了其他建议。

我正在修补css，到目前为止已经提出了以下内容。

这很棒，因为它可以让每一天都更大，更容易用手指选择。

然而，当谈到转换到几个月和几年ajax似乎处理它的方式是它应用top：139px到.ajax__calendar_days来将其从日历视图中分离出来。

但是因为我的每个视图现在都是200px（只是一个测试大小可能会改变这个），所以当你在它们之间轻弹时，视图现在在顶部和底部重叠，它看起来非常美观。

是否有某种方法可以控制日历如何定义其即时更改的大小？

/* Ajax Control Toolkit Calendar */

.ajax__calendar_container       
{
    left:5% !important;
    width:90% !important;
    background-color:#fff; 
    border:solid 1px #a6c9e2 !important;
}

.ajax__calendar_header      {background-color:#87b6d9; margin-bottom:5px; height: 26px !important;}
.ajax__calendar_prev    {}

.ajax__calendar_title   {height:26px; color:#fff; line-height:26px;}
.ajax__calendar_hover .ajax__calendar_title {color:#eee !important;}

.ajax__calendar_next    {}

.ajax__calendar_prev,.ajax__calendar_next{background-color:#dce6f4;width:26px !important; height:26px !important; color:#fff !important;}

.ajax__calendar_body        {width:100% !important; height:200px !important;}

.ajax__calendar_days    {width:100% !important; height:200px !important}
.ajax__calendar_months  {width:100% !important; height:200px !important}
.ajax__calendar_years   {width:100% !important; height:200px !important}

.ajax__calendar_months  table {height:200px !important}

.ajax__calendar_days table thead tr td {background-color:#fff; color:#000; font-weight:bold;}

.ajax__calendar_dayname {width:100% !important; text-align:center !important; border:0 !important;}

.ajax__calendar_day {text-align:center !important; border:1px solid #c5dbec !important; background:#eaf4fd; margin:1px !important; height:26px !important; width:90% !important;}

.ajax__calendar_month {text-align:center !important; width:100% !important;vertical-align:middle !important}

.ajax__calendar_month, .ajax__calendar_day {color:#2e6e9e; font-weight:bold; }

.ajax__calendar_year {text-align:center !important; }

.ajax__calendar_footer          {border-top:1px solid #c5dbec !important; line-height:1.2em;}

.ajax__calendar_today       {border:1px solid #c5dbec; background-color:#e1effb;}

.ajax__calendar_hover           {}
td.ajax__calendar_hover div     {background:#d2e6f5 !important; border:1px solid #79b7e7 !important;}

.ajax__calendar_active          {}
td.ajax__calendar_active div    {background:#fbec88 !important; border:1px solid #fad42e !important;}

.ajax__calendar_other           {}

.ajax__calendar_other .ajax__calendar_day {text-align:center !important; font-weight:normal !important; color:#bbb !important; border:1px solid #eee !important;}

.ajax__calendar_hover.ajax__calendar_other .ajax__calendar_day {background:#efefef !important; color:#aaa !important; border:1px solid #ddd !important;}

Answer 1

我找到了解决方案。我使用了OnClientShown属性

<cc2:CalendarExtender ID="TextBox2_CalendarExtender" CssClass="custom-calendar" runat="server" TargetControlID="f_BookingDate" PopupButtonID="f_BookingDateButton"
    Format="dd/MM/yyyy" PopupPosition="BottomRight" FirstDayOfWeek="Monday" OnClientDateSelectionChanged="UpdateAvailability" OnClientShown="onClientShown">
</cc2:CalendarExtender>

然后在我的脚本中

<asp:ScriptManager ID="f_WebBookingScriptManager" runat="server">
</asp:ScriptManager>
<script type="text/javascript" language="javascript">
    function onClientShown(sender, e) {
        sender._height = 200;
    }
</script>

这设置了容器的动态高度。它被认为是日历行为的一部分

ajax calendar extender - 自定义高度导致视图重叠

1 个答案: