Completed
Last Updated: 08 Aug 2024 08:55 by ADMIN
Release 2024 Q3 (Aug)
CHRISTOPHER
Created on: 29 Jul 2024 09:33
Category: Date/Time Pickers
Type: Bug Report
3
DatePicker and DateTimePicker is not entirely visible when width in pixels is set

Bug report

When the width of the DatePicker and DateTimePicker is set through style attribute and is set with fixed pixels, the buttons with icons for opening the popup might be hidden.

Reproduction of the problem

  1. Open the Dojo - https://dojo.telerik.com/@NeliK/ESesUSoW

Current behavior

Depending on the browser used the buttons containing the calendar and time icons are partially visible or entirely hidden. The issue does not occur if the width is set in percentages.

Expected/desired behavior

The DatePicker and DateTimePicker components should be entirely visible when the width is set in pixels through the style attribute.

 

Workaround: Set the input element's width to 100%:

for DatePicker:

.k-datepicker input {
      width: 100% !important;
}

for DateTimePicker:

.k-datetimepicker input {
      width: 100% !important;
}

for TimePicker:

.k-timepicker input {
      width: 100% !important;
}

 

Environment

  • Kendo UI version: 2024.2.514
  • Browser: [all ]
2 comments
ADMIN
Nikolay
Posted on: 08 Aug 2024 08:55

Hi CHRISTOPHER,

The fix for this is already available with the release from yesterday - 2024.3.806. Please upgrade the Kendo UI to have it available in your project.

Regards,
Nikolay
Progress Telerik

Do you have a stake in the designеr-developer collaboration process? If so, take our survey to share your perspective and become part of this global research. You’ll be among the first to know once the results are out.
-> Start The State of Designer-Developer Collaboration Survey 2024

CHRISTOPHER
Posted on: 02 Aug 2024 14:04

This is not a work around for us.  This was an obvious thing we could do.  We set our field widths to the exact size in may places of our application and setting the widths to 100% in some of these causes the controls to be 300 or 400px wide.

We will just have to wait for your fix.