Date/Time picker component disappears when selected

[Daniel]

I am using the Kendo AngularJS date/time picker i.e.  <input kendo-date-picker ... /> 

I use the componentin all kinds of places in my web application. However on one page, clicking a datepicker causes it to disappear. See the following GIF of the behaviour: http://imgur.com/a/UAJug

The other datepickers in the GIF mostly work okay, but the featured one does not. Funnily enough, when you scroll back up the page and then scroll down - or when you make your window height smaller - the datepicker works correctly and the calendar does not disappear.

This is the snippet of the datepicker in question:

<div class="form-group">
                    <label class="col-xs-3 control-label" title="Default value">
                        {{'DATASOURCE.VARIABLES.DEFAULT_VALUE' | translate}}
                    </label>
                    <div class="col-xs-8" ng-switch="stagedVariable.type">
                        <input ng-switch-when="Date" kendo-date-time-picker k-ng-model="stagedVariable.defaultValue"/>
                        <input ng-switch-when="number" class="form-control" ng-model="stagedVariable.defaultValue" type="number" max="9007199254740991" min="-9007199254740991"/>
                        <input ng-switch-when="string"  class="form-control" ng-model="stagedVariable.defaultValue" type="text"/>
                        <select ng-switch-when="option" class="form-control" ng-model="stagedVariable.defaultValue"
                            ng-options="val as val for val in stagedVariable.allowedValues">
                        </select>
                    </div>
                </div>

[Daniel]

Oh forgot to post the version of Kendo UI I am using: 2017.1.223

Problem also seems to occur in 2017.2.504

[Stefan]

Hello Daniel,

Based on the provided information this seems to be a positioning issue related to the popup.

I can assume that there are custom styles, which are interfering with the widget boundaries and the popup will not be positioned as expected.

In this scenario I can suggest after the widget has initialized to try changing the popup collisions property to check if it will fix the issue:

widgetInstance.dateView.popup.collisions = ["fit", "flip"]

http://docs.telerik.com/kendo-ui/api/javascript/ui/popup#configuration-collision

If the issue still occurs, please send us a runnable example, and I will gladly investigate what may be causing it.

Regards,
Stefan
Telerik by Progress

[Daniel]

I checked the styles on all the Kendo descendant elements of the datepicker <input>. There areno custom styles so I don't think that was the issue.

I managed to fix it by keeping the default "collision" options but adding a lot more space under the Done button (visible in GIF). 

By adding more space between the bottom element in the page (Done button), the picker renders toward the bottom (i.e. flip). Now it doesn't close before I have the chance to choose a date. Somehow, letting it render toward the bottom prevent the collision events or whatever from triggering.

Thanks for setting me on the right direction!