5

我有一个剑道日期选择器，我在剑道窗口中显示它，它显示如下：

图片

Datepicker 有点臃肿，字体和大小都比平常大。在 Kendo 窗口之外，日期选择器显示正常。现在，我想知道是否可以调整日期选择器或其中的字体，假设缩小字体也会缩小日期选择器。

我尝试将其添加到 CSS 中：

.k-popup .k-calendar {
   font-size: 10px !important;
}

结果很奇怪：

图2

它仅部分起作用，因为仅减少了月份名称，数字仍然很大...

主要问题是，当打开日期选择器时，它会溢出剑道窗口尺寸之外：我正在寻找一种解决方案，可以让我缩小日期选择器的大小以使其适合。

编辑

我试图添加k-calendar类：

@(Html.Kendo().DatePicker()
    .Name("concessionTOD")
    .Start(CalendarView.Month)
    .Value(DateTime.Now)
    .Format("yyyy-MM-dd")
    .Culture("pt-PT")
    .HtmlAttributes(new { @class = "k-calendar" })
)

但结果是这样的：

图3

您可以在上图中看到输入和月份名称的大小确实减小了，但日历本身却一直臃肿。

编辑 2

我了解到，如果将窗口定义为 iFrame，则内部结果可能会有所不同，因为 iFrame 作为常规网页，需要 DOCTYPE 以及 html、head 和 body 标签。我将此添加到插入到窗口中的局部视图中，结果是：

图4

因此，日历不再臃肿，但仍会溢出窗口的高度，导致出现滚动条。要访问日历的下部，我必须使用滚动。如前所述，我希望日历溢出窗口外，如 OnaBai 的回答所示，而不创建任何滚动条。

另外，我在文档中发现

Refreshes the content of a Window from a remote URL or the initially defined content template. Note that passing data and non-GET requests cannot be sent to an iframe, as they require a form with a target attribute.

我不确定如何解释第二句话，但它可能有助于处理这个问题。

4

2 回答 2

4

使用以下 CSS 选择器/定义：

.k-calendar {
    font-size: 10px;
}

检查以下代码片段。

$("#datepicker").kendoDatePicker();
$("#win").kendoWindow({
  title: "window with datepicker"
});
.k-calendar {
  font-size: 10px;
}
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css" />
<script src="http://cdn.kendostatic.com/2014.3.1119/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>

<div id="win">
  <input id="datepicker" value="10/10/2011"/>
</div>

于 2014-11-27T13:13:37.780 回答
1

好的，所以我解决了我的问题，telerik 支持被证明是最有价值的。他们提醒我，不可能有一个溢出的 iframe。

所以，我从剑道窗口中删除了我的 iFrame 设置：

@(Html.Kendo().Window()
    .Name("addConcessionWindow")
    .Modal(true)
    //.Iframe(true)
    .Visible(false)
)

并删除了我在填充窗口的 html 页面中的脚本和样式引用（因此它们不会被加载两次）。

底线是：

不可能有溢出的 iframe。

于 2015-05-11T15:24:39.953 回答