Rank 1
Iron
After upgrading our application from an older version of Kendo to v2022 R1 (301), we discovered a strange problem with the Kendo DatePicker popup calendar. Everything works fine on a desktop web browser but on a mobile phone the month calendar view renders as in the attached image:
Other calendar display modes work correctly. The problem seems to occur on all the phones we have tried (Android, iPhone).
The DatePicker control is instantiated on demand via Jquery function. No special DatePicker features used. Here is a snippet from the rendering function (ownerDiv is a parameter passed to the function):
var datepickerWrapper = ownerDiv.find('#end-date-wrapper');
datepickerWrapper.empty();
datepickerWrapper.append('<input id="chart-end-date" name="chart-end-date" style="width:8em" />');
datepickerDiv = historyDiv.find('#chart-end-date');
datepickerDiv.kendoDatePicker({
animation: false,
change: function (e) {
changeEnddate(e);
}
});
The only slightly unusual thing about this is the parent HTML is part of the detail pane for a Kendo grid. The popup calendar used to work just fine in the old version of Kendo we used to use (version circa 2018).
I'm at a loss. Android Chrome debugger running against a phone executing the DatePicker does not reveal any browser exceptions.
Any thoughts?
Jeff Benson
Senior Developer
New Boundary Technologies, Inc.
2 Answers, 1 is accepted
Rank 1
Iron
Hello, Jeff,
Could you please modify this Dojo example to demonstrate the issue you are experiencing? It opens as expected on the Android device I tested. Probably it has something to do with the "The only slightly unusual thing about this is the parent HTML is part of the detail pane for a Kendo grid" part, but I am not sure I completely understand the scenario.
Thank you for the cooperation. Looking forward to your reply.
Regards,
Martin
Progress Telerik
Rank 1
Iron
Hi Martin,
Thanks for the response. I'm not sure the Dojo will help since it may be difficult to reproduce. I think I have identified the sole difference between the Windows desktop calendar and the mobile phone calendar.
Inside the calendar popup is a <div class="k-calendar-view k-calendar-monthview">...</div> and inside that is a <table> that is assigned classes k-calendar-table, k-content and k-month. Inside the table is a <thead> section and a <tbody> section. In the case of a normal Windows desktop, the <thead> section renders with dimensions 238x30 while the tbody section has dimensions 238x204. By contrast, on mobile Chrome, the same thead section renders with dimension 238x204, same as the tbody section! I have been unable to explain this by any styling differences between the two platforms. Whatever is causing this is, it remarkably consistent. On mobile, the single <tr> section within the <thead> renders with the seven <th> elements in a vertical column (normally the <tr> is only 30px tall and each <th> is laid out horizontally, as one expects. On Windows desktop the individual <th> cells render at size 34x30 while on mobile the <th> cells are only 32x29. Why the difference?
I have tried experimenting with the .k-calendar-tr and .k-calendar-th styles but without success in coaxing the <tr> to display horizontally on mobile. The only style change that works so far is setting display:none; on the entire thead section. But that is not desireable.
Rank 1
Iron
Rank 1
Iron
Martin:
We have figured out the cause of the calendar header row issue. In the version of Kendo we are using, at least, there is a media-specific styling override for <th> elements. The display definition was set to "inline-flex". On desktop Windows the default definition for <th> is display: table-cell. We should be able to set our application styles to compensate for this issue.
Jeff
Hi Jeff,
As far as I understand you have managed to find the cause of the issue. I am glad to hear that and thank you for sharing it with the community. I am sure it will be helpful to the other users in the forum that have the same problem.
In case you have any additional questions related to the current thread do not hesitate to contact us.
Regards,
Neli
Update: I've been inspecting the rendered HTML in both Android/Chrome and desktop Windows/Chrome, looking for differences. I have only found two basic differences.
* On Android, the calendar table header ( <thead class="k-calendar-thead">...</thead> ) is for some reason rendering like a series of rows, instead of the expected header. This has the result of pushing the table body down so that most of the calendar rows are outside the visible area of the calendar view.
* Stylings assigned to the <div class="k-animation-container"...> are somewhat different between desktop and Android Chrome. Desktop styles include "box-sizing: content-box" whereas Android does not have this style.. Android includes "transform: translateZ(0px)" style, wheras desktop does not.
I'm not sure whether the styling differences are contributing to the defect but maybe?
Jeff