我的 Kendo 日期选择器在靠近页面底部时不可见
My Kendo Datepicker is not visible when close to the bottom of the page
在 ASP Razor 下使用 Kendo 日期选择器时,如果选择器靠近页面底部,控件将在可见区域外打开。它还在离控件很远的地方打开。
@model [Company].DebugViewModel
<h2>Development Debug Page</h2>
@using (Html.BeginForm("Index", "Debug", FormMethod.Post))
{
<div class="form-group">
<label for="DebugDate">Blank Space:</label>
<div style="height:2000px; background-color:lightgray;"> </div>
</div>
<div class="form-group">
<label for="DebugDate">Debug Date:</label>
@Html.Kendo().DatePickerFor(a => a.DebugDate)
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary" style="width:120px;" value="Save" />
</div>
}
这是一张图片:
最后,由于收到的反馈,我决定从项目中删除 bootstrap。幸运的是,这是一个仅限桌面的应用程序。
这是我最终使用的:
<style>
body {
padding: 0 0 20px 0;
margin: 0;
position:relative; /* Fixed Kendo widget box problem */
}
.form-container {
width: 100%;
max-width:800px;
margin: 16px auto;
}
</style>
<div class="k-content form-container">
<ul>
<li>
<label for="ID">ID:</label>
@Html.Kendo().TextBoxFor(a => a.ID)
</li>
<li>
<label for="Date">Date:</label>
@Html.Kendo().DatePickerFor(a => a.Date)
</li>
</ul>
</div>
在 ASP Razor 下使用 Kendo 日期选择器时,如果选择器靠近页面底部,控件将在可见区域外打开。它还在离控件很远的地方打开。
@model [Company].DebugViewModel
<h2>Development Debug Page</h2>
@using (Html.BeginForm("Index", "Debug", FormMethod.Post))
{
<div class="form-group">
<label for="DebugDate">Blank Space:</label>
<div style="height:2000px; background-color:lightgray;"> </div>
</div>
<div class="form-group">
<label for="DebugDate">Debug Date:</label>
@Html.Kendo().DatePickerFor(a => a.DebugDate)
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary" style="width:120px;" value="Save" />
</div>
}
这是一张图片:
最后,由于收到的反馈,我决定从项目中删除 bootstrap。幸运的是,这是一个仅限桌面的应用程序。
这是我最终使用的:
<style>
body {
padding: 0 0 20px 0;
margin: 0;
position:relative; /* Fixed Kendo widget box problem */
}
.form-container {
width: 100%;
max-width:800px;
margin: 16px auto;
}
</style>
<div class="k-content form-container">
<ul>
<li>
<label for="ID">ID:</label>
@Html.Kendo().TextBoxFor(a => a.ID)
</li>
<li>
<label for="Date">Date:</label>
@Html.Kendo().DatePickerFor(a => a.Date)
</li>
</ul>
</div>