Gantt Scrollbar


#1

Hi,

I want to have the horizontal scrollbar just below the last row in the Gantt. Gantt should have vertical scrollbar only if the height of the Gantt container is less than the Gantt height( which is equal to height of header + height of all the rows).

Is it possible to do it?

Regards,
Pravin


#2

Hello Pravin,
It should work that way out of the box(except the horizontal scrollbar exactly below the last row). If the displayed date range doesn’t fit the width of the Gantt container, Gantt adds the horizontal scrollbar. If there are more tasks than the height of the Gantt container, Gantt adds the vertical scrollbar.
You can check how it works in the following snippet:
https://snippet.dhtmlx.com/5/4fde31b1d

To see the scrollbar exactly below the last task row, you can set the autosize parameter to 'y':
https://docs.dhtmlx.com/gantt/api__gantt_autosize_config.html
That will tell Gantt to render itself vertically, so the height of the page will increase. And the vertical scrollbar will be rendered by the browser, not by Gantt.
Here is the snippet:
http://snippet.dhtmlx.com/5/bacd4a432

There is no other way to do that. You will need to implement a custom solution by using the Gantt API and Javascript.

If you want to have separate scrollbars in the grid and the timeline, you need to modify the layout configuration:
https://docs.dhtmlx.com/gantt/desktop__specifying_columns.html#horizontalscrollbar
https://docs.dhtmlx.com/gantt/desktop__layout_config.html#layoutcustomization
Here is an example:
https://docs.dhtmlx.com/gantt/samples/07_grid/10_scrollable_grid.html


#3

Hi Ramil,

Thanks for response. The requirement is slightly different.
The horizontal scrollbar should be end of last row if rows are fitting inside the parent container.

If the data is more and if vertical scrollbar is present, then the horizontal scrollbar should be at the end of the bottom of parent container.

The first requirement is satisfied by setting autoSize = “y”. But the second requirement is not satisfied.

I hope this helps in understanding requirement.

Regards,
Pravin


#4

Hello Pravin,
Gantt consists of different parts: grid, timeline, resizers, scrollbars.
The scrollbars are not part of the timeline or grid. They are completely different elements:



You could try to modify the DOM structure, but then the scrollbar would be limited by the grid or timeline sizes:

So, there is no easy way to move the scrollbar below the last task row.

It would be easier to move it above the grid and the timeline to always see it:
http://snippet.dhtmlx.com/5/c51d36430