How can I control the height and alignment of time picker lines in KendoReact DateTimePicker?

[Nurik]

when I adaptive my component for another size I get this bug. How can I control line position of time. I didn't find any class or style to control behavior of scroll line. 

[Yanko]

Hi, Nurik,

First, consider using adaptive rendering, which automatically adjusts the layout and styling based on the screen size. This feature is part of KendoReact and can help maintain the alignment and position of elements when resizing. You can refer to the Adaptive Rendering article of the TimePicker for further information:

• https://www.telerik.com/kendo-react-ui/components/dateinputs/timepicker/adaptive-rendering 

Since there is no built-in way to position the line directly, you can apply custom styles targeting the line elements. You can target the line element using .k-time-highlight.

To assist you better, could you please provide an example or code snippet where the issue occurs? This will help diagnose the problem and offer a more precise solution.

Bear in mind that applying custom styles might affect some parts of the built-in functionality or styles. If adaptive rendering does not resolve your issue, custom CSS and JavaScript adjustments will be necessary. Feel free to share more details or an example, and I'll be happy to help further!

Regards,
Yanko
Progress Telerik

[Nurik]

The main problem is with the dateTimePicker component: the fonts and some element sizes use rem units. If I change the :root font-size, the elements of the dateTimePicker also change their size, which causes this bug. Just changing the .k-time-highlight class does not make sense and will not fix the issue. I think that allowing developers to change the height of the time scroll could fix this problem. 
Alternatively, I could change all elements that use rem units to px to ensure a static font size and positioning but without adaptive. Only with props adaptive-rendering

[Yanko]

I extensively tested the described scenario. In certain scenarios, setting the font-size at the root level resulted in a slight misalignment in the TimePicker, far less than the one displayed in the screenshot. I tried setting the font-size by overriding the respective CSS variable, and it worked as expected, the font-size changed without interfering with the aligning of the line:

            :root{
                --kendo-font-size-lg: 20px;
            }

I prepared a StackBlitz example to test the behavior of the component:

• https://stackblitz.com/edit/react-r75lqm5a?file=index.html 

Please let me know if the above solution applies to your scenario, and if it does not, please provide an example that reproduces the issue. You can modify the above example to reproduce the met behaviour if it would be easier for you. This way I can debug this behaviour on my end and provide you with more accurate solution.

[Nurik]

I wrote about DateTimePicker component, but in your example you use TimePicker.

Here example:
https://stackblitz.com/edit/react-sny3wlux?file=app%2Fstyles.css,app%2Fapp.tsx

[Yanko]

Hi, Nurik,

Thank you for the example provided.

I apologize for the misreading. I tested the example and reproduced the behaviour displayed in the picture. You are correct that the height of the container needs to be adjusted. I tested setting the line-height property to 1.5 to be in sync with the new font size, and the time scroll aligned the numbers correctly. I updated the provided example to demonstrate the described solution:

• https://stackblitz.com/edit/react-sny3wlux-sffmm9ga?file=app%2Fstyles.css 

Additionally, you can use the kendo theme variables --kendo-font-size and --kendo-line-height to set these properties only for the kendo components in your application. 

Lastly, I suggest exploring the default Adaptive Rendering of the KendoReact DateTimePicker, provided built in by setting the `adaptive` property of the DateTimePicker to true:

• https://www.telerik.com/kendo-react-ui/components/dateinputs/datetimepicker/adaptive-rendering 

Please let me know if additional inquiries arise.

[Nurik]

In your example, changing the line-height doesn't fix the issue and doesn't make any difference. In the DateTimePicker component, if I set the font-size to 12px, 16px, or 20px on the :root, the component appears correctly. However, if I use any other font size, a bug appears. Any project or user that sets the font-size to 14px or another value on :root will encounter this bug. Your team needs to fix this issue or at least mention in the documentation that this component has such a limitation.

I also tested the TimePicker component, and it has the same issue.

[Yanko]

Hi, Nurik,

I further tested different scenarios and concluded that changing the font size in the root element causes misalignment of the scrollable elements in the Time part. Therefore, I logged it as a bug in our public repo:

• https://github.com/telerik/kendo-react/issues/3151 

The reason why this behaviour occurs in both DateTimePicker and TimePicker is that the DateTimePicker reuses the logic from the TimePicker for its Time part.

The recommended approach to evade this behaviour is to use the built-in Adaptive Rendering feature to optimize how the component displays on smaller screens. 

Additionally, I updated your Telerik Points as a token of appreciation for the effort in bringing this issue to our attention.

I apologize for any inconvenience this issue might cause you.

[Nurik]

Thank you for your feedback. I'm happy to assist your team with improving the product.

[Yanko]

Hey, Nurik,

I will close this thread for now. If additional inquiries arise or if I can further assist you. You can reopen the thread by typing another message in it.

Regards,
Yanko
Progress Telerik