Gantt chart autoresize vs 100% height and width

Gantt
#1

Hi,

We would like to know the difference between autoresize to true vs 100% height and width for the grid container.
Here are the observations:
when we set 100% height and width for the grid container: even though there is space on the screen to occupy (in different resolutions) we get horizontal and vertical scrolls.
When set autoresize to true the grid/gantt flows down and only horizontal scroll comes. But in this mode there is no way to view the fixed header, as the scroll comes to the browser window.

What settings should be used if we want the gantt to automatically fill in the available space on the window.

Thanks in Advance.

#2

Hi,
‘autosize’ config defines, whether the gantt will fit data inside the sizes of container where it’s initialized (’#gantt_here’ in most of our demos) showing inner scrollbars,
or will it modify the sizes of container in order to show all data without inner scrolls

docs.dhtmlx.com/gantt/snippet/6b31c4e1 - sizes of gantt div defined in css. Inner scrollbars are active if necessary
docs.dhtmlx.com/gantt/snippet/cb6165f4 - sizes of gantt div are calculated by a component. Inner scrollbars are disabled
That’s basically it, there is no additional logic.

If you want the gantt to fit a certain area on your page, the size of gantt container must be managed from your side - usually this means that autosizing should be disabled, and width/height of a div are calculated either by your html layout if you use some ready solution for responsive layouts, or manually by code.

Regarding the scrollbars,

Probably there is an issue with a page markup. For example, if the page has some margin (by default it has), then 100% div will be bigger than a screen size and the page will have a scrollbars, since the page content width will be 100% + margin size
docs.dhtmlx.com/gantt/snippet/e0923f00

#3

Hi Aliaksandr,

Thank you for the explanation.
Is there a way to fix the gantt header, while content scrlls in the below cases:

http://docs.dhtmlx.com/gantt/snippet/e0923f00
docs.dhtmlx.com/gantt/snippet/cb6165f4

Many thanks.

#4

Hello,
in that case the whole page is scrolled (i.e. the scrollbar is outside the gantt), so there is no built-in way.
You can try fixing the scale position is by doing some workaround with position:static, or maybe by moving scale elements by JS, either manually or by using some library for scroll effects.