Set height of the gantt chart as 100%

[Stephen Wright]

When I set the height of the gantt chart as 100% to fit it to the parent's content, it overflows the parent a little.

Also I need to change the height of the column headers too, but when I changed them with CSS, it looked that the height of the table was affected.

Here are some queries regarding the height adjustments:

1. Is there a way to fit the height to its parent exactly?

2. Is there a way to set the height of timeline header columns?

3. When there isn't enough tasks on the table and I still want the grid lines fill the rest of the table bottom space. Please check the below screenshot.

Hope to get any help on the above questions. Thanks.

[Monisha Sivanthilingam]

Hi Stephen, 

 

Thank you for contacting Syncfusion support. 

 

Please find the response for your queries. 

 

Sl. No	Query	Syncfusion Comments
1	Is there a way to fit the height to its parent exactly?	We suggest setting the value of the height property as 100% to fit the Gantt to the parent element. The following code snippets demonstrate the solution.    app.component.html              <ejs-gantt id="ganttDefault" [dataSource]="data" [taskFields]="taskSettings" [allowSelection]="true" height="100%"                          [gridLines]="gridLines" [labelSettings]="labelSettings" [projectStartDate]="projectStartDate"                          [projectEndDate]="projectEndDate" [highlightWeekends]="true">              </ejs-gantt>
2	Is there a way to set the height of timeline header columns? Also I need to change the height of the column headers too	We have made use of the CSS classes of the timeline header and column header to change their heights. The following code snippets demonstrate the solution.    Index.html  <style>                          .e-gantt .e-gantt-tree-grid-pane .e-columnheader,                          .e-gantt .e-gantt-tree-grid-pane .e-headercell {                                      height: 100px !important;                          }                            .e-gantt .e-gantt-chart .e-timeline-header-container {                                      height: 100px !important;                          }                            .e-gantt .e-gantt-chart .e-timeline-top-header-cell {                                      height: 50px;                          }              </style>
3	When there isn't enough tasks on the table and I still want the grid lines fill the rest of the table bottom space.	We have made use of the CSS classes for the grid lines to increase their height to the height of the Gantt rendered. The following code snippets demonstrate the solution.    index.html  <style>        .e-gantt .e-gantt-chart .e-line-container-cell {          height: 482px;        }          .e-chart-rows-container {          height: 482px !important;        }      </style>

 

We have also prepared a sample for your reference. 

 

Please contact us if you require any further assistance. 

 

Regards, 

Monisha. 

[Shubhi Sood]

Hi Monisha,

I'm also facing the issue of Gantt chart grid lines disappearing. I tried solution number 3.

which is

<style>

      .e-gantt .e-gantt-chart .e-line-container-cell {

        height: 482px;

      }

      .e-chart-rows-container {

        height: 482px !important;

      }

 </style>

after doing the above changes, I'm not able to scroll the Gantt chart.

here is sample: Sample

how can we fix this?

[Monisha Sivanthilingam]

Hi Shubhi,

We have changed the behavior of the Gantt Chart to render the vertical gridlines to the complete height of the Gantt instead of the content height alone. Please update your packages to the latest version, (i.e.), v20.2.43 to avail this behavior.

Sample: https://stackblitz.com/edit/angular-xunist?file=app.component.html

Regards,

Monisha.

[Shubhi Sood]

Hi Monisha,

i'm using angular version 10 currently and In your sample i.e https://stackblitz.com/edit/angular-xunist?file=app.component.html

you guys using angular version 12.

so, to update syncfusion packages to v20.2.43, ​do I need to update angular to version 12?

because when i'm updating syncfusion packages to v20.2.43​, with angular 10, I'm facing issue

[Monisha Sivanthilingam]

Hi Shubhi,

Yes, the latest version is can only be used with Angular 12. However, you can use ngcc tagged packages of Angular Syncfusion components for versions below Angular 12. Please refer the below documentation link to install the ngcc tagged packages.

Documentation: https://ej2.syncfusion.com/angular/documentation/getting-started/angular-cli/#angular-compatibility-compiled-package-ngcc

Regards,

Monisha.