UI Issues

Question

Hello,I have 2 separate issues. 1. For some reason the right side of the gantt chart is adding 10px height to each row. Inspecting the page, i can see that the left and the right side have incline styles of 61px, but the right side has a real height of 71px. I manually set a row height of 61, which i am assuming is where the inline style is comming from. I have not been able to track down where the extra 10px are coming from, i was hoping there was maybe a flag or something that i unknowingly set, or didnt set that can account for this. I am able to 'fix' this by reducing the height of the left label by 10px like: .e-left-label-container height: 25px !importantbut this isnt ideal for me, as it requires maintenance of the rows. 2. The right side can scroll down further than the left side. This causes miss-alignment.To illustrate: Normal: Scrolled all the way to the bottom: The rows are one-to-one on purpose, and i would like them to stay aligned. Code that is used for both problems:

{{data.taskData.TaskName}}
{{data.taskData.TeamName}}

Great job! You don’t have any unplanned work.

{{data.taskData.Allocation}}%	{{data.taskData.StoriesCurrent}} of {{replaceEmpty(data.taskData.StoriesTotal)}}	{{data.taskData.PointCurrent}} of {{replaceEmpty(data.taskData.PointsTotal)}}
Allocated	Stories	Points

{{ data.taskData.Complete }}% Complete

{{ data.taskData.InProgress }}% In-Progress

{{ data.taskData.Planned }}% Planned

{{ data.taskData.NotPlanned }}% Not Planned*

Andrew Tarr · Answer

I couldnt paste this into the first message:

public data: object[];
    public editSettings: EditSettingsModel;
    public labelSettings: object;
    public projectEndDate: Date;
    public projectStartDate: Date;
    public resourceFields: ResourceFieldsModel;
    public resources: object[];
    public splitterSettings: object;
    public taskbarTemplate: any;
    public taskSettings: TaskFieldsModel;
    public timelineSettings: object;
    public toolbar: string[];

    public ngOnInit(): void {
        this.data = resourceData;
        this.taskSettings = {
            id: 'Id',
            name: 'TaskName',
            startDate: 'StartDate',
            endDate: 'ReleaseDate',
            child: 'BusinessObjectives'
        };
        this.resourceFields = {
            id: 'resourceId',
            name: 'resourceName',
            unit: 'unit'
        };
        this.editSettings = {
            allowAdding: true,
            allowEditing: true,
            allowDeleting: true,
            allowTaskbarEditing: true,
            showDeleteConfirmDialog: true,
        };
        this.toolbar = ['Add', 'Edit', 'Update', 'Delete', 'Cancel', 'ExpandAll', 'CollapseAll'];
        this.splitterSettings = {
            columnIndex: 5.1
        };
        this.projectStartDate = new Date('01/28/2020');
        this.projectEndDate = new Date('07/28/2020');

        this.timelineSettings = {
            showTooltip: true,
            timelineUnitSize: 80,
            updateTimescaleView: true,
            weekStartDay: 1, //SUNDAY == 0
            weekendBackground: 'red',
            topTier: {
                format: 'MMM yyy',
                unit: 'Month',
                count: 1,
            },
            bottomTier: {
                format: 'MMM dd',
                unit: 'Week',
            }
        };
    }

Logeswari Gopalakrishnan · Answer

Hi Andrew, 
 
Issue 1:  
 
We have analyzed the your query, as you were using the templates in Grid side, the TR element’s height will be calculated based on inner contents in Grid part, this may greater than rowHeight property value. 
So please check whether the TR elements height value of both Grid and Chart side are equal to the rowHeight property value using developer tools. If it is greater than rowHeight value set maximum TR height value to rowHeight property. To resolve this issue set the maximum TR element’s height to the rowHeight property of Gantt. 
 
 
Issue 2:   
 
By analyzing the screenshot we note, that you have added header element. We have prepared a sample similar to the screenshot attached by adding tr element using dataBound event. While appending tr element chart container('.e-chart-rows-container')  heightis not same as grid container. This results in the mismatch of grid rows and chart rows, while scrolling. We need to set height of container based on header element’s height. And row misalignment was occurred when we don’t refer the bootstrap CSS file in application. So make sure you are referred bootstrap CSS in your application. 
Please refer the following code snippet to refer the bootstrap file in your application. 
 




 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
   
 
 
We also prepared a sample for both issues, please find the demo sample from below link. 
 
Sample – https://stackblitz.com/edit/angular-syaast-ckml8r?file=app.component.ts 
 
If you are still facing any issues, please modify the shared sample link and revert us. So that it will be very helpful for us to check in our end and provide you a better solution. 
 
Regards, 
Logeswari G