[Scheduler] Table headers are not in sync

[BeniFreitag]

Description

When the scheduler is shown or hidden via style="display: none" the headers are not in sync.

Probably related to #4359

Cause: BaseView.syncTables() checks for hasScrollbar() and the adds inline-styles to the header (padding-inline-end: 0px or padding-inline-start), but these styles are not removed if needed.

Fix would probably to simply remove the inline-styles on the header when neeeded.

Steps To Reproduce

Sample:

1. initially hide the scheduler via style="display: none"
2. when the application is loaded, remove the display: none (e.g. via a button click)
3. Scheduler headers are out of sync (e.g. in the week-view)

see https://stackblitz.com/edit/kendo-scheduler-header-not-in-sync?file=src%2Fapp%2Fapp.component.ts

Screenshots or video

Actual Behavior

week view headers are not in sync with the table below, they're missing the space for the scrollbars

Expected Behavior

week view headers should always be in in sync with the table below. BaseView.syncTables() should remove the inline-styles when needed.

Browser

All

Browser version

latest

OS type

No response

OS version

No response

Last working version of the Kendo UI for Angular package (if regression).

No response

[BeniFreitag]

Table headers are also not in sync when the browser zoom is changed, e.g. on the Angular Scheduler Example. Especially in use cases where zoom in/out causes the scollbars to appear/disapear.

[svetq]

@BeniFreitag, as a workaround you can use the Angular *ngIf directive to display the Scheduler conditionally.

[BeniFreitag]

Thanks. Unfortunately *ngIf causes side effects and performance issues in our use case.

I created a workaround by removing the style padding-inline-end causing the issue:

  private fixSchedulerHeaderAlignment() {
    const schedulerContent = this.el.nativeElement.querySelector('.k-scheduler-content')

    if (!schedulerContent)
      return

    const contentHasVerticalScrollbars = (schedulerContent.scrollHeight > schedulerContent.clientHeight) && (scrollbarWidth() > 0)
    if (!contentHasVerticalScrollbars)
      return

    const schedulerHeader = this.el.nativeElement.querySelector('.k-scheduler-header') as HTMLDivElement | null
    if (!schedulerHeader)
      return

    schedulerHeader.style.removeProperty('padding-inline-end')
  }