Web Themes Feedback Portal
Back to Feed
Request a Feature Report a Bug
Unplanned
Last Updated: 19 Feb 2025 09:33 by ADMIN
Serhii
Created on: 05 Feb 2025 18:40
Type: Bug Report
0
Gantt timeline with bootstrap theme has misaligned hover row

When Gantt is used with bootstrap theme there is an accumulating error that leads to the row hover effect being misaligned with actual grid rows. This issue only appears on the Windows versions of Chrome and Firefox, Mac OS versions seem to be unaffected.

This Stackblitz was taken directly from angular gantt overview page.

Steps to reproduce:

  1. Open stackblitz
  2. Scroll to the end of the table
  3. Hover over one of the timeline rows
  4. Hover is misaligned

See attached video.


Attached Files:
3 comments
ADMIN
Martin Bechev
Posted on: 19 Feb 2025 09:33

Hi Serhii,

Thank you for the heads up. 

I further consulted the issue with our front-end team developers and can confirm that the issues have a different root cause despite they affect the same elements. That is why I logged a separate issue in the public themes repo which can be found here:

https://github.com/telerik/kendo-themes/issues/5346

It looks the Gantt has some issues with the Bootstrap theme and its further customizations. I passed the feedback to the team to consider our options on how to improve the usability of the Gantt when the Bootstrap theme is applied. We will do our best to fix it as soon as possible, but I cannot commit to a specific ETA, as we typically abstain from giving exact timelines and would not like to make promises that might not be able to hold.

That is why we usually urge our customers to subscribe to the GitHub issues and once it's fixed to be notified accordingly.

Regards,
Martin Bechev
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Serhii
Posted on: 12 Feb 2025 17:59

Hi Martin,

Thank you for you response.

I believe the issue you mentioned is a slightly different one, the one on github is about the left side tree list being miss-aligned with the right side timeline.

The issue we having is that the hover row on the timeline is out of sync with the timeline itself. We managed to identify the root cause of this issue. That happens because 'regular' row is 1 pixel taller than 'milestone' or 'summary' rows. That happens by default only on Windows due to system-ui font difference between Mac OS and Windows.

Frankly speaking, I find Gantt to be quite unreliable when typography is overwritten. These variables: $kendo-font-family, $kendo-font-size, $kendo-font-weight can cause major visual disruption on Gantt (including left and right side rows being non-aligned).

ADMIN
Martin Bechev
Posted on: 12 Feb 2025 14:39

Hi Serhii,

Thank you for the provided feedback and attachment.

Indeed this is s known issue of the Gantt component when the Bootstrap theme is utilized. The report has been logged in our public kendo-themes repo:

https://github.com/telerik/kendo-themes/issues/2685

I also noticed that the issue was logged years ago, which is why I brought it to the attention of the development team. We will do our best and add it to the roadmap, but I am afraid that at this moment I cannot commit to an exact timeline for when the issue will be fixed. That is why please subscribe for the issue to be notified when there is any update. 

Accept our apologies for the caused inconvenience.

Regards,
Martin Bechev
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Create an account Log In
View
Type
Status