This is a migrated thread and some comments may be shown as answers.

Date/Time picker component disappears when selected

3 Answers 1251 Views
Date/Time Pickers
This is a migrated thread and some comments may be shown as answers.
Daniel
Top achievements
Rank 1
Daniel asked on 12 May 2017, 01:52 AM

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>

3 Answers, 1 is accepted

Sort by
0
Daniel
Top achievements
Rank 1
answered on 12 May 2017, 01:54 AM

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

Problem also seems to occur in 2017.2.504

0
Stefan
Telerik team
answered on 12 May 2017, 11:33 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Daniel
Top achievements
Rank 1
answered on 14 May 2017, 10:29 PM

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!

Tags
Date/Time Pickers
Asked by
Daniel
Top achievements
Rank 1
Answers by
Daniel
Top achievements
Rank 1
Stefan
Telerik team
Share this question
or