Adjust the right-side text properties

Modified on Tue, 26 Nov at 1:59 PM

This article explains how to adjust the right-side text properties, such as alignment, size, and color, to improve readability or match specific style preferences.

Here is an example of the right-side text:

Adjust text color, alignment and size

To customize these properties, add a 'Script - block' from the widgets to the page containing your Gantt chart. Insert the following CSS:

<style>
.gantt_side_content.gantt_right {
   bottom:  0px;
    top: -5px; 
}


.gantt_task_line .gantt_side_content {
    color: green;
    font-size: 10px;
}

</style>

Positioning: Modify the top and bottom values to adjust the vertical alignment of the text.
Appearance: Customize the color and font-size to match your style preferences.

An example:

Adjust row and task height

To control the spacing and appearance of tasks, you can modify the row and task heights. Ensure that the task height is slightly smaller than the row height for proper rendering. Navigate to 'Gantt Config Script' and insert there the following script:

gantt.config.task_height = 20;
gantt.config.row_height = 22;

Task Height: Defines the vertical space occupied by each task.
Row Height: Defines the overall height of a row in the Gantt.

An example of this configuration:

For guidance to change the right-side text, check our article How to change text on right?

If you need assistance or have further questions, feel free to contact us at [email protected]