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

Kendo DateTime Picker popup centered on the screen

1 Answer 16 Views
DateTimePicker
This is a migrated thread and some comments may be shown as answers.
florian
Top achievements
Rank 1
florian asked on 16 Apr 2021, 02:30 PM

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

1 Answer, 1 is accepted

Sort by
0
Martin
Telerik team
answered on 20 Apr 2021, 09:51 AM

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

Тhe web is about to get a bit better! 

The Progress Hack-For-Good Challenge has started. Learn how to enter and make the web a worthier place: https://progress-worthyweb.devpost.com.

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