Scheduler Timeline view - event line width issue

I have been trying, with no luck, to figure out why my event line does not fit the exact width of the time scale (start and end dateTime). I recreated my scheduler using the snippet with the exact same css from my custom skin and everything seems to be perfectly aligned. However, the width is slightly off when I am rendering the Gantt inside some nested divs because it is part of a larger page (react project). Any help would be appreciated, or tips on what could be causing it/where to look.

This is my snippet:

This is what it looks like when I render it in my react project. Notice how all the event lines are slightly bigger than the desired width.

Vivek Patel


The issue is related to the way how you set height and position of the events elements.

Do it using CSS is not a good solution. You need to configure these values by using configurations in the createTimelineView method. Pay attention to " dy", " event_dy" and " event_min_dy" properties.

Here is your updated snippet

I also advice you to check all properties of the createTimelineView method. It will be very useful for you while you working with this view.