[SOLVED] 100% progress, but the width of the progress div is smaller than that of its parent by 2px

Gantt
#1

I have a peculiar issue. All of these custom-styled tasks are at 100% progress (i.e. the value is 1), yet the width of the .gantt_task_progress div is short by 2px. I haven’t added any logic to set the width programmatically, yet this happens. Help?

image

#2

The Developer Tools of your browser (which I see you’re already using) should tell you all the rules that are being applied to the divs, as well as the calculated result of all the rules. Is there anything setting a margin on the div.gantt_task_progress or a padding on the div.gantt_task_progress_wrapper?

1 Like
#3

Hello,
The different width of the divs happens due to the default border of the custom task. It’s a designed behavior and a part of the Gantt’s logic.
It seems that you removed border rule so it caused the different widths. To fix that, you can use the border-right and border-left rules with the same color as the .gantt_task_progress div. For example, like this:


.custom_task .gantt_task_progress{
    background:#6663FF;
    border-right: 1px solid #6663FF;
    border-left: 1px solid #6663FF;
}

Please check the example: https://snippet.dhtmlx.com/ie5vq088
(the width of the divs is the same). If it doesn’t help you, you can reproduce your issue in the snippet, then click on the “Save” button and send me the link.

1 Like
#4

Thank you! That was indeed the issue. Adding 1px left and right borders and (re)setting box-sizing to content-box was all that was needed. Appreciate the help.