kendo-angular
kendo-angular copied to clipboard
Misalignment issues on different screen resolutions
Describe the bug The Scheduler has some misalignment issues caused by different screen resolutions (reproduced on mobile devices as well).
Month view issue (snapshot taken from the site):
Week view all-day slot misalignment (snapshot taken from the site):
To Reproduce Zoom the browser https://stackblitz.com/edit/angular-q4aaeu?file=src%2Fapp%2Fapp.component.ts
I face the same issue. I noticed that it happens as soon as I set a height via CSS to the <kendo-scheduler>
Please also note that there is another misalignment issue when having multiple lines in header, as you can see below:
<kendo-scheduler
scrollTime="08:00"
[weekStart]="weekStart"
[kendoSchedulerBinding]="events"
[selectedDate]="selectedDate"
[selectedViewIndex]="selectedViewIndex"
[showWorkHours]="true"
>
<ng-template kendoSchedulerDateHeaderTemplate let-date="date">
<span>{{ date | kendoDate:'EEEE' }}</span>
<br>
<span>{{ date | kendoDate:'dd.MM.yyyy' }}</span>
</ng-template>
<kendo-scheduler-day-view> </kendo-scheduler-day-view>
<kendo-scheduler-week-view> </kendo-scheduler-week-view>
<kendo-scheduler-month-view> </kendo-scheduler-month-view>
<kendo-scheduler-timeline-view> </kendo-scheduler-timeline-view>
<kendo-scheduler-agenda-view> </kendo-scheduler-agenda-view>
</kendo-scheduler>
In my opinion this issue should have higher severity.
Also, none of these issues are happening on the Kendo UI React library. Perhaps the structure of the Scheduler is different? If so, it might be a good idea to build Kendo UI libraries atomically to avoid such surprises.
An example of the last reported issue:
https://stackblitz.com/edit/angular-cfkeca-zwqudl
Fix available in latest dev version.
Fix available in v4.3.5 and above of @progress/kendo-angular-scheduler.