Bad Alignement in rows

Question

Hi,I am testing your React Gannt component but I have a problem :I have a bad alignement in the gantt rows : the field part of row do not have the same height as the chart Got the problem on both Chrome and Firefox.Could you help me on this ?Regards,

Monisha Sivanthilingam · Answer

Hi Plasse,Greetings from Syncfusion support.We noticed from the image you have shared, that you
have used the taskbar template and you have also used the rowHeight property to set
the height of the rows in the Gantt Chart. Please correct us if our assumption
is wrong. When you set the rowHeight
property, then the records will be rendered based on the value given in
the rowHeight property.
However, if a column template is used, then the height of the row is recalculated
based on the template defined. However, only the height of the rows on the grid
side will be affected, the rows on the chart side will be rendered according to
the height defined in the rowHeight property. Hence, a mismatch in height of
the rows on both the grid and chart sides occurs. This is why the issue you
reported occurs.We can overcome this issue
by identifying the height of the rows in the grid side and setting that value
to the rowHeight property.We have prepared a sample
for your reference.Please contact us if you
require any further assistance.Regards,Monisha.

PLASSE · Answer

Hi, I finally found what's happening.I m using semantic-rect-ui ( https://react.semantic-ui.com/ ) so have a css : import 'semantic-ui-css/semantic.min.css';And in this css, there is in body : line-height: 1.4285em;this value is overided by heigh: 'rowHeight"px in the columns part but not the gantt part.So changing the rowHeigh do not change the different height :/How can i make the Gantt overwrite it for both ?Regards,Mathieu.

PLASSE · Answer

I fixed it with <GanttComponent style={{lineHeight: "normal"}} ...But i m not really satisfied with this solution

Monisha Sivanthilingam · Answer

Hi Plasse,We have considered the issue you reported as an issue
and have logged a bug report for it. You can track its status from the below
feedback link.Feedback: https://www.syncfusion.com/feedback/28703/misalignment-when-line-height-property-is-usedThe fix will be provided in the weekly release
scheduled for October 6, 2021.We appreciate your patience until then.Regards,Monisha.

Lucas Ruiz · Answer

Hello and good afternoon.I have encountered the same issue with the same component, the syncfusion library is updated but the table looks uneven from left to right, like in the example above. Was the update that addressed this released on the 6th of October?Thanks for your support.

Monisha Sivanthilingam · Answer

Hi Plasse, 
 
We apologize for the inconvenience caused. 
 
Due to some technical reasons, the reported issue “Misalignment when line-height property is used” was not fixed in the patch release scheduled on October 6. However, the issue was later fixed in the version v19.3.45. Please find the release notes from the below link. 
 
Release Notes: https://ej2.syncfusion.com/react/documentation/release-notes/19.3.45/?type=all#gantt 
 
Sample: https://codesandbox.io/s/focused-saha-12wv6?file=/src/index.js 
 
Please upgrade your packages to that version to avoid this issue. 
 
Regards, 
Monisha.

Lorena Tamayo · Answer

Hello and good morningI am using your React Gannt component, the syncfusion library is updated to version 19.3.45, but I have the same problem, the table looks uneven from left to right when using rowHeight property, especially when using dimension smaller than the default set, also when you scroll on the left side of the Gantt component there is an offset between the rows.Could you help me with this?  Recreated case: https://stackblitz.com/edit/react-rtabid-ahzhxz?file=index.js Thanks for your support.

Monisha Sivanthilingam · Answer

Hi Lorena, 
 
We noticed from the sample you have shared, that you have used the taskbar template and you have also used the taskbarHeight property to set the height of the taskbar in the Gantt Chart. You have also used the rowHeight property. When you set the rowHeight property, then the records will be rendered based on the value given in the rowHeight property. However, if a column template is used, then the height of the row is recalculated based on the template defined. But, only the height of the rows on the grid side will be affected, the rows on the chart side will be rendered according to the height defined in the rowHeight property. Hence, a mismatch in height of the rows on both the grid and chart sides occurs. This is why the issue you reported occurs. 
 
We can overcome this issue by identifying the height of the rows on the grid side and setting that value to the rowHeight property. 
 
We also noticed that you have set the value of taskbarHeight greater than that of the rowHeight. The value should always be less than the rowHeight property, We have shared Codesnippet and UG documentation for your reference  
 
Codesnippet:  




 
rowHeight ={70} 
taskbrHeight ={65} 
 
 
UG Link: https://ej2.syncfusion.com/react/documentation/gantt/appearance-customization/#taskbar-height 
 
Please contact us if you require any further assistance. 
 
Regards, 
Premkumar S.