DateTimePicker in Dialog on Small Resolution

Updated on Feb 24, 2026

Environment

Product

Progress® Kendo UI for Angular Dialog

Description

How to scroll the page when displaying DateTimePicker inside a Dialog on a small resolution screen?

Solution

The DateInputs components (DatePicker, DateTimePicker, and others) provide an adaptive mode feature that automatically adjusts the rendering based on screen size. For more information, see DateTimePicker Adaptive Mode.

To allow proper page scrolling when displaying a DateTimePicker inside a Dialog on a small resolution screen, set the Dialog's position to absolute using its style property:

html

  <kendo-dialog style="position: absolute">...</kendo-dialog>

The following example shows the full implementation of the demonstrated approach.

Change Theme

Theme

Loading ...