@syncfusion/ej2-gantt 19.4.56 → 20.1.47

package/src/gantt/renderer/connector-line.js

@@ -115,7 +115,7 @@ var ConnectorLine = /** @class */ (function () {
         for (var i = 0; i < childNodes.length; i++) {
             var innerChild = childNodes[i].childNodes;
             for (var j = 0; j < innerChild.length; j++) {
-                var ariaString = this.parent.connectorLineModule.generateAriaLabel(ariaConnector[i]);
+                var ariaString = 'Connector Line ' + this.parent.connectorLineModule.generateAriaLabel(ariaConnector[i]);
                 innerChild[j].setAttribute('aria-label', ariaString);
             }
         }
@@ -372,7 +372,11 @@ var ConnectorLine = /** @class */ (function () {
         var connectorContainer = '';
         var isVirtual = this.parent.virtualScrollModule && this.parent.enableVirtualization;
         var connectorLine = this.getPosition(data, this.getParentPosition(data), height);
-        var heightValue = isVirtual ? connectorLine.height : height;
+        var isMilestoneValue = 0;
+        if (this.parent.renderBaseline) {
+            isMilestoneValue = (data.milestoneParent && data.milestoneChild) ? 0 : data.milestoneParent ? -5 : data.milestoneChild ? 5 : 0;
+        }
+        var heightValue = isVirtual ? connectorLine.height : (height + isMilestoneValue);
         if (this.getParentPosition(data)) {
             connectorContainer = '<div id="ConnectorLine' + data.connectorLineId + '" style="background-color:black">';
             var div = '<div class="' + cls.connectorLineContainer +
@@ -400,7 +404,7 @@ var ConnectorLine = /** @class */ (function () {
                 this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div>';
             if (this.getParentPosition(data) === 'FSType1') {
                 div = div + 'left:' + (data.parentLeft + data.parentWidth) + 'px;top:' + (isVirtual ? connectorLine.top :
-                    ((data.parentIndex * data.rowHeight) + this.getTaskbarMidpoint(isMilestone) - (this.lineStroke - 1))) + 'px;' +
+                    ((data.parentIndex * data.rowHeight) + this.getTaskbarMidpoint(isMilestone) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
                     'width:1px;height:' + heightValue + 'px;position:absolute" data-connectortype="FSType1">';
                 div = div + eLine;
                 div = div + 'left:' + (isMilestoneParent ? -1 : 0) + 'px;width:' + (isMilestoneParent ?
@@ -421,7 +425,7 @@ var ConnectorLine = /** @class */ (function () {
             }
             if (this.getParentPosition(data) === 'FSType2') {
                 div = div + 'left:' + data.parentLeft + 'px;top:' + (isVirtual ? connectorLine.top : ((data.parentIndex * data.rowHeight) +
-                    this.getTaskbarMidpoint(isMilestone) - (this.lineStroke - 1))) + 'px;' +
+                    this.getTaskbarMidpoint(isMilestone) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
                     'width:1px;height:' + heightValue + 'px;position:absolute" data-connectortype="FSType2">';
                 div = div + eLine;
                 div = div + 'left:' + (isMilestoneParent ? data.parentWidth - 1 : data.parentWidth) + 'px;width:' +
@@ -452,7 +456,7 @@ var ConnectorLine = /** @class */ (function () {
             }
             if (this.getParentPosition(data) === 'FSType3') {
                 div = div + 'left:' + (data.childLeft - 20) + 'px;top:' + (isVirtual ? connectorLine.top :
-                    ((data.childIndex * data.rowHeight) + this.getTaskbarMidpoint(isMilestoneParent) - (this.lineStroke - 1))) + 'px;' +
+                    ((data.childIndex * data.rowHeight) + this.getTaskbarMidpoint(isMilestoneParent) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
                     'width:1px;height:' + heightValue + 'px;position:absolute" data-connectortype="FSType3">';
                 div = div + rightArrow;
                 div = div + 'left:10px;' + this.getBorderStyles('left', 10) +
@@ -482,7 +486,7 @@ var ConnectorLine = /** @class */ (function () {
             }
             if (this.getParentPosition(data) === 'FSType4') {
                 div = div + 'left:' + (data.parentLeft + data.parentWidth) + 'px;top:' + (isVirtual ? connectorLine.top :
-                    ((data.childIndex * data.rowHeight) + this.getTaskbarMidpoint(isMilestone) - (this.lineStroke - 1))) + 'px;' +
+                    ((data.childIndex * data.rowHeight) + this.getTaskbarMidpoint(isMilestone) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
                     'width:1px;height:' + heightValue + 'px;position:absolute" data-connectortype="FSType4">';
                 div = div + rightArrow;
                 div = div + 'left:' + (data.childLeft - (data.parentLeft + data.parentWidth + 10)) + 'px;' +
@@ -508,7 +512,7 @@ var ConnectorLine = /** @class */ (function () {
             }
             if (this.getParentPosition(data) === 'SSType4') {
                 div = div + 'left:' + (data.parentLeft - 10) + 'px;top:' + (isVirtual ? connectorLine.top :
-                    ((data.childIndex * data.rowHeight) + this.getTaskbarMidpoint(isMilestone) - (this.lineStroke - 1))) + 'px;' +
+                    ((data.childIndex * data.rowHeight) + this.getTaskbarMidpoint(isMilestone) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
                     'width:1px;height:' + heightValue + 'px;position:absolute" data-connectortype="SSType4">';
                 div = div + rightArrow;
                 div = div + 'left:' + (data.childLeft - data.parentLeft) + 'px;' + duplicateStingTwo;
@@ -521,7 +525,7 @@ var ConnectorLine = /** @class */ (function () {
             }
             if (this.getParentPosition(data) === 'SSType3') {
                 div = div + 'left:' + (data.childLeft - 20) + 'px;top:' + (isVirtual ? connectorLine.top :
-                    ((data.childIndex * data.rowHeight) + this.getTaskbarMidpoint(isMilestone) - (this.lineStroke - 1))) + 'px;' +
+                    ((data.childIndex * data.rowHeight) + this.getTaskbarMidpoint(isMilestone) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
                     'width:1px;height:' + heightValue + 'px;position:absolute" data-connectortype="SSType3">';
                 div = div + rightArrow;
                 div = div + 'left:10px;' + duplicateStingTwo;
@@ -534,7 +538,7 @@ var ConnectorLine = /** @class */ (function () {
             }
             if (this.getParentPosition(data) === 'SSType2') {
                 div = div + 'left:' + setInnerElementLeftSSType2 + 'px;top:' + (isVirtual ? connectorLine.top :
-                    ((data.parentIndex * data.rowHeight) + this.getTaskbarMidpoint(isMilestoneParent) - (this.lineStroke - 1))) + 'px;' +
+                    ((data.parentIndex * data.rowHeight) + this.getTaskbarMidpoint(isMilestoneParent) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
                     'width:1px;height:' + heightValue + 'px;position:absolute" data-connectortype="SSType2">';
                 div = div + eLine;
                 div = div + 'width:' + (setInnerChildWidthSSType2 + 1) + 'px;' +
@@ -555,7 +559,7 @@ var ConnectorLine = /** @class */ (function () {
             if (this.getParentPosition(data) === 'SSType1') {
                 div = div + 'left:' + (data.childLeft - 20) + 'px;top:' + (isVirtual ? connectorLine.top :
                     ((data.parentIndex * data.rowHeight) +
-                        this.getTaskbarMidpoint(isMilestoneParent) - (this.lineStroke - 1))) + 'px;' +
+                        this.getTaskbarMidpoint(isMilestoneParent) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
                     'width:1px;height:' + heightValue + 'px;position:absolute" data-connectortype="SSType1">';
                 div = div + eLine;
                 div = div + 'width:' + (data.parentLeft - data.childLeft + 21) + 'px;' +
@@ -572,7 +576,7 @@ var ConnectorLine = /** @class */ (function () {
             }
             if (this.getParentPosition(data) === 'FFType1') {
                 div = div + 'left:' + (data.childLeft + data.childWidth) + 'px;top:' + (isVirtual ? connectorLine.top :
-                    ((data.parentIndex * data.rowHeight) + this.getTaskbarMidpoint(isMilestoneParent) - (this.lineStroke - 1))) + 'px;' +
+                    ((data.parentIndex * data.rowHeight) + this.getTaskbarMidpoint(isMilestoneParent) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
                     'width:1px;height:' + heightValue + 'px;position:absolute" data-connectortype="FFType1">';
                 div = div + eLine;
                 div = div + 'left:' + (isMilestoneParent ? (((data.parentLeft + data.parentWidth) -
@@ -596,7 +600,7 @@ var ConnectorLine = /** @class */ (function () {
             }
             if (this.getParentPosition(data) === 'FFType2') {
                 div = div + 'left:' + (data.parentLeft + data.parentWidth) + 'px;top:' + (isVirtual ? connectorLine.top :
-                    ((data.parentIndex * data.rowHeight) + this.getTaskbarMidpoint(isMilestoneParent) - (this.lineStroke - 1))) + 'px;' +
+                    ((data.parentIndex * data.rowHeight) + this.getTaskbarMidpoint(isMilestoneParent) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
                     'width:1px;height:' + heightValue + 'px;position:absolute" data-connectortype="FFType2">';
                 div = div + eLine;
                 div = div + (isMilestoneParent ? 'left:-1px;' : '') + 'width:' +
@@ -622,7 +626,7 @@ var ConnectorLine = /** @class */ (function () {
             }
             if (this.getParentPosition(data) === 'FFType3') {
                 div = div + 'left:' + (data.childLeft + data.childWidth) + 'px;top:' + (isVirtual ? connectorLine.top :
-                    ((data.childIndex * data.rowHeight) + this.getTaskbarMidpoint(isMilestone) - (this.lineStroke - 1))) + 'px;' +
+                    ((data.childIndex * data.rowHeight) + this.getTaskbarMidpoint(isMilestone) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
                     'width:1px;height:' + heightValue + 'px;position:absolute" data-connectortype="FFType3">';
                 div = div + duplicateStingOne;
                 div = div + eLine;
@@ -645,7 +649,7 @@ var ConnectorLine = /** @class */ (function () {
             }
             if (this.getParentPosition(data) === 'FFType4') {
                 div = div + 'left:' + (data.parentLeft + data.parentWidth) + 'px;top:' + (isVirtual ? connectorLine.top :
-                    ((data.childIndex * data.rowHeight) + this.getTaskbarMidpoint(isMilestone) - (this.lineStroke - 1))) + 'px;' +
+                    ((data.childIndex * data.rowHeight) + this.getTaskbarMidpoint(isMilestone) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
                     'width:1px;height:' + heightValue + 'px;position:absolute" data-connectortype="FFType4">';
                 div = div + leftArrow;
                 div = div + ('left:' + ((data.childLeft + data.childWidth) -
@@ -674,7 +678,7 @@ var ConnectorLine = /** @class */ (function () {
             }
             if (this.getParentPosition(data) === 'SFType4') {
                 div = div + 'left:' + (data.parentLeft - 10) + 'px;top:' + (isVirtual ? connectorLine.top :
-                    ((data.childIndex * data.rowHeight) + this.getTaskbarMidpoint(isMilestone) - (this.lineStroke - 1))) + 'px;width:1px;' +
+                    ((data.childIndex * data.rowHeight) + this.getTaskbarMidpoint(isMilestone) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;width:1px;' +
                     'height:' + heightValue + 'px;position:absolute" data-connectortype="SFType4">';
                 div = div + duplicateStingFour + 'top:' + (-5 - this.lineStroke + (this.lineStroke - 1)) + 'px;' +
                     'border-bottom-width:' + (5 + this.lineStroke) +
@@ -702,7 +706,7 @@ var ConnectorLine = /** @class */ (function () {
             }
             if (this.getParentPosition(data) === 'SFType3') {
                 div = div + 'left:' + (data.childLeft + data.childWidth) + 'px;top:' + (isVirtual ? connectorLine.top :
-                    ((data.childIndex * data.rowHeight) + this.getTaskbarMidpoint(isMilestone) - (this.lineStroke - 1))) + 'px;' +
+                    ((data.childIndex * data.rowHeight) + this.getTaskbarMidpoint(isMilestone) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
                     'width:1px;height:' + heightValue + 'px;position:absolute" data-connectortype="SFType3">';
                 div = div + duplicateStingOne;
                 div = div + eLine;
@@ -720,7 +724,7 @@ var ConnectorLine = /** @class */ (function () {
             }
             if (this.getParentPosition(data) === 'SFType1') {
                 div = div + 'left:' + (data.parentLeft - 10) + 'px;top:' + (isVirtual ? connectorLine.top :
-                    ((data.parentIndex * data.rowHeight) + this.getTaskbarMidpoint(isMilestone) - (this.lineStroke - 1))) + 'px;' +
+                    ((data.parentIndex * data.rowHeight) + this.getTaskbarMidpoint(isMilestone) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
                     'width:1px;height:' + heightValue + 'px;position:absolute" data-connectortype="SFType1">';
                 div = div + eLine;
                 div = div + 'width:11px;' + this.getBorderStyles('top', this.lineStroke) + 'position:relative;"></div>';
@@ -745,7 +749,7 @@ var ConnectorLine = /** @class */ (function () {
             }
             if (this.getParentPosition(data) === 'SFType2') {
                 div = div + 'left:' + (data.childLeft + data.childWidth) + 'px;top:' + (isVirtual ? connectorLine.top :
-                    ((data.parentIndex * data.rowHeight) + this.getTaskbarMidpoint(isMilestoneParent) - (this.lineStroke - 1))) + 'px;' +
+                    ((data.parentIndex * data.rowHeight) + this.getTaskbarMidpoint(isMilestoneParent) - (this.lineStroke - 1) - isMilestoneValue)) + 'px;' +
                     'width:1px;height:' + heightValue + 'px;position:absolute" data-connectortype="SFType2">';
                 div = div + eLine;
                 div = div + 'left:' + (((data.parentLeft) - (data.childLeft + data.childWidth)) - 10) +

package/src/gantt/renderer/event-marker.js

@@ -15,6 +15,7 @@ var EventMarker = /** @class */ (function () {
                 this.eventMarkersContainer = createElement('div', {
                     className: cls.eventMarkersContainer
                 });
+                this.eventMarkersContainer.setAttribute("role", "EventMarker");
                 this.parent.ganttChartModule.chartBodyContent.appendChild(this.eventMarkersContainer);
             }
             this.eventMarkersContainer.innerHTML = '';

package/src/gantt/renderer/nonworking-day.js

@@ -1,4 +1,4 @@
-import { createElement, formatUnit, remove } from '@syncfusion/ej2-base';
+import { createElement, formatUnit, remove, isNullOrUndefined } from '@syncfusion/ej2-base';
 import * as cls from '../base/css-constants';
 var NonWorkingDay = /** @class */ (function () {
     function NonWorkingDay(gantt) {
@@ -17,6 +17,7 @@ var NonWorkingDay = /** @class */ (function () {
             this.nonworkingContainer = createElement('div', {
                 className: cls.nonworkingContainer
             });
+            this.nonworkingContainer.setAttribute("role", "NonWorkingDays");
             this.parent.ganttChartModule.chartBodyContent.appendChild(this.nonworkingContainer);
         }
     };
@@ -54,8 +55,11 @@ var NonWorkingDay = /** @class */ (function () {
         var toDate;
         var container = createElement('div');
         var height = this.parent.contentHeight;
-        var scrollElement = this.parent.ganttChartModule.scrollElement;
-        var viewportHeight = parseInt(scrollElement.style.height, 10);
+        var toolbarHeight = 0;
+        if (!isNullOrUndefined(this.parent.toolbarModule)) {
+            toolbarHeight = this.parent.toolbarModule.element.offsetHeight;
+        }
+        var viewportHeight = this.parent.ganttHeight - toolbarHeight - this.parent.ganttChartModule.chartTimelineContainer.offsetHeight;
         for (var i = 0; i < this.parent.holidays.length; i++) {
             if (this.parent.holidays[i].from && this.parent.holidays[i].to) {
                 fromDate = this.parent.dateValidationModule.getDateFromFormat(this.parent.holidays[i].from);
@@ -148,9 +152,12 @@ var NonWorkingDay = /** @class */ (function () {
         return container;
     };
     NonWorkingDay.prototype.updateHolidayLabelHeight = function () {
-        var height = this.parent.contentHeight;
-        var scrollElement = this.parent.ganttChartModule.scrollElement;
-        var viewportHeight = parseInt(scrollElement.style.height, 10);
+        var height = this.parent.getContentHeight();
+        var toolbarHeight = 0;
+        if (!isNullOrUndefined(this.parent.toolbarModule) && !isNullOrUndefined(this.parent.toolbarModule.element)) {
+            toolbarHeight = this.parent.toolbarModule.element.offsetHeight;
+        }
+        var viewportHeight = this.parent.ganttHeight - toolbarHeight - this.parent.ganttChartModule.chartTimelineContainer.offsetHeight;
         var top = (viewportHeight < height) ? viewportHeight / 2 : height / 2;
         var labels = this.holidayContainer.querySelectorAll('.' + cls.holidayLabel);
         for (var i = 0; i < labels.length; i++) {

package/src/gantt/renderer/timeline.d.ts

@@ -212,6 +212,7 @@ export declare class Timeline {
      * @private
      */
     private createTimelineTemplate;
+    updateTimelineAfterZooming(endDate: Date, resized: boolean): void;
     private getTimelineRoundOffEndDate;
     /**
      *

package/src/gantt/renderer/timeline.js

@@ -843,6 +843,40 @@ var Timeline = /** @class */ (function () {
         } while ((startDate < endDate));
         return parentTh;
     };
+    Timeline.prototype.updateTimelineAfterZooming = function (endDate, resized) {
+        var timeDiff;
+        var perDayWidth;
+        var totWidth;
+        var contentElement = document.getElementsByClassName('e-chart-scroll-container e-content')[0];
+        if (!isNullOrUndefined(contentElement)) {
+            var contentWidth = contentElement['offsetWidth'];
+            var contentHeight = contentElement['offsetHeight'];
+            var scrollHeight = document.getElementsByClassName('e-chart-rows-container')[0]['offsetHeight'];
+            timeDiff = Math.abs(this.timelineStartDate.getTime() - endDate.getTime());
+            timeDiff = timeDiff / (1000 * 3600 * 24);
+            if (this.bottomTier === 'None') {
+                perDayWidth = this.getPerDayWidth(this.customTimelineSettings.timelineUnitSize, this.customTimelineSettings.topTier.count, this.topTier);
+            }
+            else {
+                perDayWidth = this.getPerDayWidth(this.customTimelineSettings.timelineUnitSize, this.customTimelineSettings.bottomTier.count, this.bottomTier);
+            }
+            if (contentHeight < scrollHeight) {
+                totWidth = (perDayWidth * timeDiff) + 17;
+            }
+            else {
+                totWidth = (perDayWidth * timeDiff);
+            }
+            if (contentWidth >= totWidth) {
+                var widthDiff = contentWidth - totWidth;
+                widthDiff = Math.round(widthDiff / perDayWidth);
+                endDate.setDate(endDate.getDate() + widthDiff);
+                this.parent.timelineModule.timelineEndDate = endDate;
+                if (resized) {
+                    this.parent.updateProjectDates(this.timelineStartDate, this.timelineEndDate, this.parent.isTimelineRoundOff);
+                }
+            }
+        }
+    };
     Timeline.prototype.getTimelineRoundOffEndDate = function (date) {
         var tierMode = this.topTier === 'None' ? this.bottomTier : this.topTier;
         var endDate = new Date(date.toString());
@@ -857,6 +891,9 @@ var Timeline = /** @class */ (function () {
                 endDate.setHours(24, 0, 0, 0);
             }
         }
+        if (this.isZooming || this.parent.isLoad) {
+            this.updateTimelineAfterZooming(endDate, false);
+        }
         return endDate;
     };
     /**
@@ -926,7 +963,6 @@ var Timeline = /** @class */ (function () {
         }
         return increment;
     };
-    ;
     /**
      * Method to find header cell was weekend or not
      *

package/src/gantt/renderer/tooltip.js

@@ -174,6 +174,7 @@ var Tooltip = /** @class */ (function () {
      * @returns {void} .
      */
     Tooltip.prototype.updateTooltipPosition = function (args) {
+        args.element.style.visibility = 'visible';
         if (isNullOrUndefined(this.tooltipMouseEvent) || args.target.classList.contains('e-notes-info')) {
             return;
         }
@@ -203,7 +204,6 @@ var Tooltip = /** @class */ (function () {
             tooltipPositionY = tooltipPositionY + 10;
         }
         args.element.style.top = tooltipPositionY + 'px';
-        args.element.style.visibility = 'visible';
     };
     /**
      * Method to get mouse pointor position
@@ -245,9 +245,16 @@ var Tooltip = /** @class */ (function () {
         switch (elementType) {
             case 'milestone':
                 {
-                    var sDate = !isNullOrUndefined(data.startDate) ? '<tr><td class = "e-gantt-tooltip-label"> Date</td><td>:</td>' +
+                    var milestoneStartDate = void 0;
+                    if (args.target.className.includes('e-baseline-gantt-milestone') && !isNullOrUndefined(data.baselineStartDate)) {
+                        milestoneStartDate = data.baselineStartDate;
+                    }
+                    else if (!isNullOrUndefined(data.startDate)) {
+                        milestoneStartDate = data.startDate;
+                    }
+                    var sDate = !isNullOrUndefined(milestoneStartDate) ? '<tr><td class = "e-gantt-tooltip-label"> Date</td><td>:</td>' +
                         '<td class = "e-gantt-tooltip-value">' +
-                        this.parent.getFormatedDate(data.startDate, this.parent.getDateFormat()) + '</td></tr>' : '';
+                        this.parent.getFormatedDate(milestoneStartDate, this.parent.getDateFormat()) + '</td></tr>' : '';
                     content = '<table class = "e-gantt-tooltiptable"><tbody>' +
                         taskName + sDate + '</tbody></table>';
                     break;

package/styles/bootstrap-dark.css

@@ -276,6 +276,34 @@
   content: '\e903';
 }
 
+.e-bigger .e-gantt .e-gantt-chart .e-timeline-header-container {
+  height: 64px;
+}
+
+.e-bigger .e-gantt .e-gantt-chart .e-timeline-top-header-cell {
+  height: 32px;
+}
+
+.e-bigger .e-gantt .e-gantt-tree-grid-pane .e-columnheader .e-headercell {
+  height: 63px !important;
+}
+
+.e-bigger .e-columnmenu {
+  top: 40px;
+}
+
+.e-bigger .e-gantt-dialog .e-edit-form-column:nth-child(odd) {
+  padding: 16px 18px 0 18px;
+}
+
+.e-bigger .e-gantt-dialog .e-edit-form-column:nth-child(even) {
+  padding: 16px 18px 0 0;
+}
+
+.e-bigger .e-gantt-dialog .e-edit-form-row.e-scroll .e-edit-form-column:nth-child(even) {
+  padding: 16px 18px 0 0;
+}
+
 .e-gantt {
   display: block;
   width: 100%;
@@ -790,9 +818,10 @@
 }
 
 .e-gantt .e-gantt-chart .e-baseline-bar {
+  border-radius: 2px;
   box-sizing: border-box;
   position: absolute;
-  z-index: 3;
+  z-index: 2;
 }
 
 .e-gantt .e-gantt-chart .e-milestone-top,
@@ -854,7 +883,6 @@
 }
 
 .e-gantt .e-gantt-chart .e-holiday .e-span {
-  font-size: 13px;
   position: absolute;
   transform: rotate(-90deg);
   white-space: nowrap;
@@ -1137,6 +1165,8 @@
 
 .e-gantt-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn {
   border-radius: 50%;
+  height: auto !important;
+  width: auto !important;
 }
 
 .e-icon-rowselect::before {
@@ -1445,11 +1475,13 @@
 .e-gantt .e-gantt-chart .e-gantt-parent-progressbar-inner-div {
   background-color: #4cc7ba;
   border: 1px solid #4cc7ba;
+  border-radius: 4px;
 }
 
 .e-gantt .e-gantt-chart .e-gantt-child-progressbar-inner-div {
   background-color: #0070f0;
   border: 1px solid #0070f0;
+  border-radius: 4px;
 }
 
 .e-gantt .e-gantt-chart .e-gantt-child-manualtaskbar {
@@ -1520,11 +1552,6 @@
 
 .e-gantt .e-gantt-chart .e-progress-resize-gripper .e-progressbar-handler {
   background: #222;
-  border-color: #fff;
-}
-
-.e-gantt .e-gantt-chart .e-progress-resize-gripper .e-progressbar-handler-element {
-  border-bottom-color: #fff;
 }
 
 .e-gantt .e-gantt-chart .e-progress-resize-gripper .e-progressbar-handler-after {
@@ -1688,15 +1715,15 @@
 }
 
 .e-gantt .e-gantt-chart .e-baseline-bar {
-  background-color: #f0ad4e;
+  background-color: #fac168;
 }
 
 .e-gantt .e-gantt-chart .e-baseline-milestone-top {
-  border-bottom-color: #f0ad4e;
+  border-bottom-color: #fac168;
 }
 
 .e-gantt .e-gantt-chart .e-baseline-milestone-bottom {
-  border-top-color: #f0ad4e;
+  border-top-color: #fac168;
 }
 
 .e-gantt .e-gantt-chart .e-uptail::before {

package/styles/bootstrap.css

@@ -426,6 +426,34 @@
   content: '\e903';
 }
 
+.e-bigger .e-gantt .e-gantt-chart .e-timeline-header-container {
+  height: 64px;
+}
+
+.e-bigger .e-gantt .e-gantt-chart .e-timeline-top-header-cell {
+  height: 32px;
+}
+
+.e-bigger .e-gantt .e-gantt-tree-grid-pane .e-columnheader .e-headercell {
+  height: 63px !important;
+}
+
+.e-bigger .e-columnmenu {
+  top: 40px;
+}
+
+.e-bigger .e-gantt-dialog .e-edit-form-column:nth-child(odd) {
+  padding: 16px 18px 0 18px;
+}
+
+.e-bigger .e-gantt-dialog .e-edit-form-column:nth-child(even) {
+  padding: 16px 18px 0 0;
+}
+
+.e-bigger .e-gantt-dialog .e-edit-form-row.e-scroll .e-edit-form-column:nth-child(even) {
+  padding: 16px 18px 0 0;
+}
+
 .e-gantt {
   display: block;
   width: 100%;
@@ -940,9 +968,10 @@
 }
 
 .e-gantt .e-gantt-chart .e-baseline-bar {
+  border-radius: 2px;
   box-sizing: border-box;
   position: absolute;
-  z-index: 3;
+  z-index: 2;
 }
 
 .e-gantt .e-gantt-chart .e-milestone-top,
@@ -1004,7 +1033,6 @@
 }
 
 .e-gantt .e-gantt-chart .e-holiday .e-span {
-  font-size: 13px;
   position: absolute;
   transform: rotate(-90deg);
   white-space: nowrap;
@@ -1287,6 +1315,8 @@
 
 .e-gantt-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn {
   border-radius: 50%;
+  height: auto !important;
+  width: auto !important;
 }
 
 .e-icon-rowselect::before {
@@ -1595,11 +1625,13 @@
 .e-gantt .e-gantt-chart .e-gantt-parent-progressbar-inner-div {
   background-color: #555;
   border: 1px solid #555;
+  border-radius: 4px;
 }
 
 .e-gantt .e-gantt-chart .e-gantt-child-progressbar-inner-div {
   background-color: #21527d;
   border: 1px solid #21527d;
+  border-radius: 4px;
 }
 
 .e-gantt .e-gantt-chart .e-gantt-child-manualtaskbar {
@@ -1670,11 +1702,6 @@
 
 .e-gantt .e-gantt-chart .e-progress-resize-gripper .e-progressbar-handler {
   background: #222;
-  border-color: #fff;
-}
-
-.e-gantt .e-gantt-chart .e-progress-resize-gripper .e-progressbar-handler-element {
-  border-bottom-color: #fff;
 }
 
 .e-gantt .e-gantt-chart .e-progress-resize-gripper .e-progressbar-handler-after {
@@ -1838,15 +1865,15 @@
 }
 
 .e-gantt .e-gantt-chart .e-baseline-bar {
-  background-color: #FF9800;
+  background-color: #f0ad4e;
 }
 
 .e-gantt .e-gantt-chart .e-baseline-milestone-top {
-  border-bottom-color: #FF9800;
+  border-bottom-color: #f0ad4e;
 }
 
 .e-gantt .e-gantt-chart .e-baseline-milestone-bottom {
-  border-top-color: #FF9800;
+  border-top-color: #f0ad4e;
 }
 
 .e-gantt .e-gantt-chart .e-uptail::before {

package/styles/bootstrap4.css

@@ -643,6 +643,34 @@
   content: '\e903';
 }
 
+.e-bigger .e-gantt .e-gantt-chart .e-timeline-header-container {
+  height: 64px;
+}
+
+.e-bigger .e-gantt .e-gantt-chart .e-timeline-top-header-cell {
+  height: 32px;
+}
+
+.e-bigger .e-gantt .e-gantt-tree-grid-pane .e-columnheader .e-headercell {
+  height: 63px !important;
+}
+
+.e-bigger .e-columnmenu {
+  top: 38px;
+}
+
+.e-bigger .e-gantt-dialog .e-edit-form-column:nth-child(odd) {
+  padding: 16px 18px 0 18px;
+}
+
+.e-bigger .e-gantt-dialog .e-edit-form-column:nth-child(even) {
+  padding: 16px 18px 0 0;
+}
+
+.e-bigger .e-gantt-dialog .e-edit-form-row.e-scroll .e-edit-form-column:nth-child(even) {
+  padding: 16px 18px 0 0;
+}
+
 .e-gantt {
   display: block;
   width: 100%;
@@ -1157,9 +1185,10 @@
 }
 
 .e-gantt .e-gantt-chart .e-baseline-bar {
+  border-radius: 2px;
   box-sizing: border-box;
   position: absolute;
-  z-index: 3;
+  z-index: 2;
 }
 
 .e-gantt .e-gantt-chart .e-milestone-top,
@@ -1221,7 +1250,6 @@
 }
 
 .e-gantt .e-gantt-chart .e-holiday .e-span {
-  font-size: 13px;
   position: absolute;
   transform: rotate(-90deg);
   white-space: nowrap;
@@ -1504,6 +1532,8 @@
 
 .e-gantt-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn {
   border-radius: 50%;
+  height: auto !important;
+  width: auto !important;
 }
 
 .e-icon-rowselect::before {
@@ -1812,11 +1842,13 @@
 .e-gantt .e-gantt-chart .e-gantt-parent-progressbar-inner-div {
   background-color: #495057;
   border: 0px;
+  border-radius: 4px;
 }
 
 .e-gantt .e-gantt-chart .e-gantt-child-progressbar-inner-div {
   background-color: #0056b3;
   border: 0px;
+  border-radius: 4px;
 }
 
 .e-gantt .e-gantt-chart .e-gantt-child-manualtaskbar {
@@ -1887,11 +1919,6 @@
 
 .e-gantt .e-gantt-chart .e-progress-resize-gripper .e-progressbar-handler {
   background: #222;
-  border-color: #fff;
-}
-
-.e-gantt .e-gantt-chart .e-progress-resize-gripper .e-progressbar-handler-element {
-  border-bottom-color: #fff;
 }
 
 .e-gantt .e-gantt-chart .e-progress-resize-gripper .e-progressbar-handler-after {
@@ -2055,15 +2082,15 @@
 }
 
 .e-gantt .e-gantt-chart .e-baseline-bar {
-  background-color: #fd7e14;
+  background-color: #ffc107;
 }
 
 .e-gantt .e-gantt-chart .e-baseline-milestone-top {
-  border-bottom-color: #fd7e14;
+  border-bottom-color: #ffc107;
 }
 
 .e-gantt .e-gantt-chart .e-baseline-milestone-bottom {
-  border-top-color: #fd7e14;
+  border-top-color: #ffc107;
 }
 
 .e-gantt .e-gantt-chart .e-uptail::before {