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

DateTimePicker in Dialog partially out of view

1 Answer 81 Views
DateTimePicker
This is a migrated thread and some comments may be shown as answers.
Roel
Top achievements
Rank 1
Roel asked on 01 Sep 2020, 06:31 PM

I have the following issue with a DateTimePicker combined with a Kendo Dialog.

When opening the DateTimePicker on certain screen sizes the bottom buttons are not visible and not accessible.

I can not scroll because of the dialog's fixed position and the DateTimePicker being stuck to the input field.

 

I attached a screenshot of the situation.

I also recreated the issue in the following stackblitz: https://stackblitz.com/edit/angular-kgwcdh

Is there any solution or workaround for this issue?

 

 

1 Answer, 1 is accepted

Sort by
0
Martin
Telerik team
answered on 03 Sep 2020, 06:59 AM

Hi Roel,

Thank you for the details provided.

The Dialog uses position: fixed by default which will prevent you from scrolling down. The straight-forward solution to the problem is to change the position CSS rule of the Dialog.

Here's an example where the position is changed to an absolute, allowing the user to scroll down to the bottom of the picker popup.

https://stackblitz.com/edit/angular-kgwcdh-2kwdrd

Let me know if you need further assistance on the topic.

Regards,
Martin
Progress Telerik

Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive , special prizes and more, for FREE?! Register now for DevReach 2.0(20).

Tags
DateTimePicker
Asked by
Roel
Top achievements
Rank 1
Answers by
Martin
Telerik team
Share this question
or