Kendo Datepicker:改变其内部的大小或字体

Question

我有一个Kendo Datepicker,我在Kendo Window中显示它,它显示如下:

Datepicker以某种方式膨胀,比通常的字体和大小更大.在Kendo窗口之外,日期选择器显示正常.现在,我想知道我是否可以调整日期选择器或其中的字体,假设缩小字体也会缩小日期选择器的大小.

我试过把它添加到CSS中:

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

结果很奇怪:

它只是部分工作,因为只有月份名称减少,数字仍然很大......

主要问题是,当打开日期选择器时,它会溢出kendo窗口维度:我正在寻找一种解决方案,允许我缩小日期选择器的尺寸以使其适合.

编辑

我试着添加这个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" })
)

但结果如下:

你可以在上面的图片中看到输入和月份名称的大小确实减少了,但是日历本身保持臃肿.

编辑2

我了解到,如果窗口被定义为iFrame,内部结果可能会有所不同,因为iFrame作为常规网页需要DOCTYPE以及html,head和body标签.我将此添加到插入窗口的部分视图中,结果如下:

因此,日历不再膨胀,但仍然溢出窗口的高度,导致滚动条出现.要访问日历的下半部分,我必须使用滚动.如前所述,我希望日历在窗口外溢出,如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.

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

Answer 1

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

因此，我从 Kendo 窗口中删除了 iFrame 设置：

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

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

底线是：

iframe 不可能溢出。