search

telerik / kendo-themes

Monorepo for SASS-based Kendo UI themes
149 stars 71 forks source link

Gantt rows are not aligned in TreeList and TimeLine part. #2685

Open matanasov opened 3 years ago

matanasov commented 3 years ago

Describe the bug The rows are misaligned in the TreeList vs TimeLine parts

To reproduce Steps to reproduce the behavior:

  1. Go to https://demos.telerik.com/blazor-ui/gantt/overview
  2. Change to Bootstrap theme

Expected behavior Lines are aligned

Screenshots image

Affected package (please remove the unneeded items)

Affected suites (please remove the unneeded items)

Affected browsers (please remove the unneeded items)

Build system information (please remove the unneeded items)

Additional context Add any other context about the bug.

epetrow commented 2 years ago

The difference in the row height is due to the table cell with class .k-command-cell which holds two buttons.

One approach to fix this would be removing the padding of the cell, however this does not look good.

image

begerard commented 2 years ago

I found this bug to be two sided:

  1. If you have a high DPI or are dezoomed it is the treelist which will have "too high" row (>40px) so I remove the padding of the offender components (button in my case) with this: .k-gantt .k-icon-button { padding: 0; }
  2. If you have a normal DPI or a zoom it is the timeline which will have "too high" (>40px) row so I removed the padding of its sub-task like this: .k-task-template { padding: 0; }

With this 2 rules the Gantt looks right in Bootstrap, at least for now.

NansiYancheva commented 8 months ago

Also reported in 1559220 and 1644974