My Kendo Datepicker is not visible when close to the bottom of the page

When using the Kendo date picker under ASP Razor, the control opens outside the visible area if the picker is close to the bottom of the page. It also opens at quite a distance from the control.

@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;">&nbsp;</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>
}

Here is an image:

In the end, thanks to the feedback I got, I decided to drop bootstrap from the project. Lucky for me this is a desktop only application.

Here is what I ended up using:

<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>