DatePicker Problem In Dialog On Small Height Screen

[Khan]

Hello, I have a problem when using DatePicker in the dialog. In the small height screen devices, the DatePicker does not show fully. Please help me if you know how to fix it, thanks!

[Tan]

Thanks Khan. I also got same issue like that. @Stefan Could you advise us some better solutions for that?

[Stefan]

Hello,

As mentioned, this is purely based on the available space it is not something we have control over to show a larger element in a smaller container.

The other option is to use only the DateInput control without the Calendar part for cases when there is no space for the full Calendar:

https://www.telerik.com/kendo-react-ui/components/dateinputs/dateinput/

[Stefan]

Hello,

Thank you for the screenshot.

In general, the DatePicker Calendar will be shown top/bottom based on the available space.

In this case, there is no space at the bottom and at the top. If we have a 400px component do show in a 300px container, there always be some part cut off.

Regards,
Stefan
Progress Telerik

[Khan]

Thank you @Stefan,

I have a solution for this problem. We can custom popup of DatePicker and set appendTo body of parent Dialog,

we will have a scrollbar in this dialog when on the small screen.

Link demo: https://stackblitz.com/edit/react-na4vms?file=app/main.jsx

[Stefan]

Hello,

Thank you for sharing this approach with the KendoReact community. It is highly appreaciated.