Kendo DateTime Picker popup centered on the screen

[florian]

Hi, 

Is it possible to show the popup of the dateTime picker centered on the screen?

There is an issue on small screens, that the Cancel and Set Buttons are not reachable (scrolling is not an option in our use-case).

It can be reproduced easily here:

https://stackblitz.com/edit/angular-datepicker-popup-settings?file=app/app.component.ts

Just enable mobile mode in chome dev tools.

Thanks,

Florian

[Martin Bechev]

Hello Florian,

Thank you for the provided screenshot.

Currently, there is no built-in option for customizing the position or size of the DateTimePicker popup. Using custom CSS is not recommended as the Calendar and the TimeSelector uses virtualization which relies on component dimensions. Some heavy adjustments are needed in such cases in order to show correctly the selected date and time in accordance with the new set dimensions.

Тhe developer can change the default popup alignment by overriding the position of the animation container with custom CSS code:

<kendo-datetimepicker 
              style="width: 100%"
              class="customClass"
              [popupSettings]="popupSettings"
              (close)="onClose($event)"
          ></kendo-datetimepicker>

.customClass > .k-animation-container {
      top: 0 !important;
}

However, this will just show the popup on top of the input saving some pixels at the bottom, which may not be a preferable approach. Here is a screencast:

https://screenrec.com/share/10Uh6PlTuo

This might be disappointing for you, but at the moment there isn't a built-in feature that allows changing the height and width of the popup.

Regards,
Martin
Progress Telerik