Scrolling from left to right of the Gantt chart about svelte-gantt

[ANovokmet]

To achieve a scrollable gantt you need to set the minWidth property ({Number} Minimum width of gantt area in px.). Try a high value first, for example, 3200.

What is an actual bug is that the demo application no longer scrolls when "week view" is chosen, which it used to. In the future, I have plans for progressive loading, which would enable you to scroll infinitely.

Please say if your issue is resolved.

@ANovokmet Yes, thanks, my issue is resolved. However, after changing the minWidth, I have noticed that the date header also scrolls. What would be nice is if the date remained fixed in one position and whilst scrolling only the time headers (i.e. the hours) moved about.

But the infinite scrolling you mentioned is also a good feature to be implemented. When are this or any of the other issues planning to be implemented by or start being implemented?

[ANovokmet]

@darekeapp
I agree that sticky headers would be nice. Maybe someone knows how to implement it? Maybe it's possible with CSS only?

I would like to say when I will work on these features but currently, I am really overwhelmed by work so I don't know. I try to keep a tab on all the issues and features.

[ANovokmet]

Tried my hand at implementing sticky headers with CSS only. You can see it on the demo https://anovokmet.github.io/svelte-gantt/, first set Week view and then scroll right. They can be set on or off per header row.

@ANovokmet That is really good! Only thing I would say that initially when the user clicks on Week view, the January 2021 is not even there until I scroll to the right. That is fine for the hours, but for the above header like the month, I think it should still be shown in the initial load of the week view page.

[ANovokmet]

You could try to move the label to the left of the header cell, perhaps using .column-header-cell { justify-content: flex-start; }. I will close this issue as it is resolved.

Just set max height for .sg-timeline-body.svelte-12fxs8g.