search

telerik / kendo-angular

Issue tracker - Kendo UI for Angular
http://www.telerik.com/kendo-angular-ui/
Other
467 stars 217 forks source link

[Scheduler] Table headers are not in sync #4415

Open BeniFreitag opened 6 days ago

BeniFreitag commented 6 days ago

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

image

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 commented 6 days ago

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.