Completed
Last Updated: 11 Sep 2020 16:16 by ADMIN
Release 2020.R3
Amitesh
Created on: 07 Apr 2020 02:36
Category: Gantt
Type: Bug Report
0
Milestone element is not positioned accurately

Hi there,

In Dojo chose Kendo UI 2020 R1 SP2 library and created a Gantt chart with one milestone and task.

Milestone's time is 9 AM but it does not line up exactly with the time block at the top of the Gantt chart (looks like 9:01 AM).

Also, tried with other libraries, the result is the same.

Example here: https://dojo.telerik.com/iPuzEcaQ

Please find the screenshot attached.

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.406/styles/kendo.default-v2.min.css"/>

    <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2020.1.406/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.406/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.406/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.406/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.406/styles/kendo.mobile.all.min.css">
<script src="https://kendo.cdn.telerik.com/2020.1.406/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.1.406/js/jszip.min.js"></script>
</head>
<body>
  
<div id="gantt"></div>
<script>
$("#gantt").kendoGantt({
  dataSource: [{
    id: 1,
    orderId: 0,
    parentId: null,
    title: "Task1",
    start: new Date("2014/6/17 9:00"),
    end: new Date("2014/6/17 9:00")
  }]
});
var gantt = $("#gantt").data("kendoGantt");
gantt.dataSource.add({
  parentId: null,
  start: new Date("2014/6/17 10:00"),
  end: new Date("2014/6/17 11:00"),
  title: "New Task"
});
</script>
</body>
</html>
Attached Files:
3 comments
ADMIN
Nencho
Posted on: 22 Apr 2020 07:51

Hello,

Yes, I can confirm that you can use the demonstrated implementation.

Regards,
Nencho
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Amitesh
Posted on: 17 Apr 2020 22:51

Hi Nencho,

Thank you for your reply.

As a temporary solution, I've added the below to CSS:

.k-milestone-wrap {
        margin: -2px -13px 0px -30px;
}

Dojo: https://dojo.telerik.com/iPuzEcaQ/13

Could you please confirm that it won't cause any other issues or maybe you can advise another solution.

Thanks.

ADMIN
Nencho
Posted on: 07 Apr 2020 10:31

Hello, Amitesh,

Indeed, there seems to be an issue with the milestone positioning, but it is only in the less themes. That said, you can remove the <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.406/styles/kendo.common.min.css"> from the example., in order to load only the default-v2 theme which is a Sass theme. In this case, there won't be any rendering issue:

https://dojo.telerik.com/iPuzEcaQ/10

As for the issue in the less themes - I have converted this thread to a bug report, which you may track for the resolution. In addition, I have updated your Telerik Points.

Please excuse us for the inconvenience caused by the bug.

Regards,
Nencho
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.