For narrow DatePicker component the date part is partially visible, when the date part is in focus and is being modified by the user

Progress® KendoReact Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Under Review

Last Updated: 19 Feb 2021 13:48 by ADMIN

Alexander

Created on: 19 Feb 2021 10:32

Type: Bug Report

For narrow DatePicker component the date part is partially visible, when the date part is in focus and is being modified by the user

The width of the Kendo React DatePicker can become small due to the container width.

In such case, consider the following use case

Users select the date part (year) and start incrementing it by the "up" key. The year date part is selected, but is partially visible,

and the users do not see the date part that they are currently modifying, while they can fully see the other date parts that are not currently in focus.

The DateInput needs a horizontal scrolling to ensure that a focused date part is fully visible to the users in case if the width of the component is narrow.

Please check the case here

https://stackblitz.com/edit/react-8dqy6j-gvgwtk?file=app%2Fmain.jsx

1 comment

ADMIN

Krissy

Posted on: 19 Feb 2021 13:48

Hi Alexander,

Thank you for reaching out.

For the moment, HTML input elements, in general, do not support scrolling, which is why the DatePicker does not have this ability as well.

What I can suggest is to set a minimum width of the DatePicker component like this. This will allow it to grow based on the available space and still has a min-width that will show the full visible date event on smaller screens:

https://stackblitz.com/edit/react-8dqy6j-2rriqy?file=app%2Fmain.jsx

I've added a className property of the DatePicker that allows me to set the width and min-width in the index.html.

Hope this is helpful.

Regards,
Krissy
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.